CSS 삼각형 사용자 정의 색상
내 CSS 삼각형 (테두리)에 사용자 지정 16 진수 색상을 사용합니다. 그러나 그렇게하는 속성을 사용하기 때문에 작업을 수행하는 방법을 잘 모르겠습니다. 나는 확장 때문에 자바 확장과 CSS3를 피하고 싶습니다. 나는 삼각형이 # 5E0 색상의 1px CAD (삼각형의 각진 주위)가있는 흰색 배경을 갖도록 노력하고 있습니다. 이게 가능해? 여기까지 내가 가진 것입니다 :
.container {
margin-left: 15px;
width: 200px;
background: #FFFFFF;
border: 1px solid #CAD5E0;
padding: 4px;
position: relative;
min-height: 200px;
}
.container:after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 100%;
width: 0;
height: 0;
border-color: transparent transparent transparent #CAD5E0;
border-style: solid;
border-width: 10px;
}
내 바이올린 : http://jsfiddle.net/4ZeCz/
실제로 두 개의 개의 삼각형으로 가짜를해야합니다 ....
.container {
margin: 15px 30px;
width: 200px;
background: #fff;
border: 1px solid #a00;
position: relative;
min-height: 200px;
padding: 20px;
text-align: center;
color: #fff;
font: bold 1.5em/180px Helvetica, sans-serif;
text-shadow: 0 0 1px #000;
}
.container:after,
.container:before {
content: '';
display: block;
position: absolute;
left: 100%;
width: 0;
height: 0;
border-style: solid;
}
.container:after {
top: 10px;
border-color: transparent transparent transparent #fdd;
border-width: 10px;
}
.container:before {
top: 9px;
border-color: transparent transparent transparent #a00;
border-width: 11px;
}
나는 당신이 받아들이지 만 더 CSS로 선택한다는 것을 알고 있습니다.
.container {
margin-left: 15px;
width: 200px;
background: #FFFFFF;
border: 1px solid #CAD5E0;
padding: 4px;
position: relative;
min-height: 200px;
}
.container:after {
content: '';
display: block;
position: absolute;
top: 10px;
right:-7px;
width: 10px;
height: 10px;
background: #FFFFFF;
border-right:1px solid #CAD5E0;
border-bottom:1px solid #CAD5E0;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
나는 이것이 클립 경로를 사용하는 더 간단한 것이라고 생각 합니다 .
.container {
width: 150px;
min-height: 150px;
background: #ccc;
padding: 8px;
padding-right: 6%;
display: inline-block;
clip-path: polygon(0% 0%,0% 100%,90% 100%,90% 5%,100% 10%,90% 15%,90% 0%);
}
<div class="container">
test content
</div>
.triangle{
position: absolute;
width:0px;
height:0px;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
border-bottom: 72px solid #DB5248;
}
.triangle:after{
position: relative;
content:"!";
top:8px;
left:-8px;
color:#DB5248;
font-size:40px;
}
.triangle:before{
content:".";
color: #DB5248;
position: relative;
top:-14px;
left:-43px;
border-left: 41px solid transparent;
border-right: 41px solid transparent;
border-bottom: 67px solid white;
}
이 작업을 수행하는 또 다른 방법은 특히 제가했던 것처럼 정삼각형 또는 스케일링 삼각형으로 작업하는 데 필요한 사람을 위해 filter: drop-shadow(...)
여러 값 을 사용 하고 블러 반경 을 사용 하지 않는 것입니다. 이것은 여러 요소가 필요하지 않거나 : before 및 : after 모두에 대한 액세스가 필요하지 않은 추가 이점이 있습니다 (인라인 인 : after 내용으로 이것을 수행하려고 했으므로 절대 위치 지정을 피하고 싶었습니다).
위의 경우 : after의 CSS는 다음과 같을 수 있습니다 ( fiddle ).
.container {
margin-left: 15px;
width: 200px;
background: #FFFFFF;
border: 1px solid #CAD5E0;
padding: 4px;
position: relative;
min-height: 200px;
}
.container:after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 100%;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 40px 15px; /* skewed to show support for non-right-angle triangles */
border-color: transparent transparent transparent #fff;
filter: drop-shadow(1px 0 0 #CAD5E0) drop-shadow(0 .5px 0 #CAD5E0);
}
<div class="container">
Test Container
</div>
하지만 몇 가지 제한 이나 기이함 이 있다고 생각합니다 .
- IE11에서 지원되지 않음 (FF, Chrome 및 Edge에서는 괜찮아 보임)
<offset-y>
위의 두 번째 drop-shadow () 의 값에 대해 .5px 가 1px보다 1px처럼 보이는 이유를 잘 모르겠지만 삼각법과 관련이 있다고 생각하지만 (적어도 내 모니터에서는 차이가 없습니다. 실제 삼각 기반 값 또는 .5px 또는 .1px).- 1px보다 큰 테두리 (그렇게 보이는 모양)는 제대로 작동하지 않는 것 같습니다. 또는 적어도 나는 해결책을 찾지 못했지만, 조금 더 크게 갈 수있는 최적이 아닌 방법은 아래를 참조하십시오. (문서화되었지만 지원되지 않는
<spread-radius>
drop-shadow ( )의 네 번째 매개 변수 ( )가 여러 필터 값 대신 실제로 찾고있는 것일 수 있다고 생각하지만, 추가하면 완전히 망가졌습니다.) 여기에서 무엇을 확인할 수 있습니다. 1px ( fiddle ) 이상으로 갈 때 발생하기 시작합니다 .
.container {
background-color: #eee;
padding: 1em;
}
.container:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 20.4px 10px 0 10px;
border-color: yellow transparent transparent transparent;
margin-left: .25em;
display: inline-block;
filter: drop-shadow(-6px -4px 0 green) drop-shadow(6px -4px 0 red) drop-shadow(0 6px 0 blue);
}
<div class="container">
Test Container
</div>
첫 번째 (녹색)는 한 번 적용되지만 두 번째 (빨간색)는 테두리를 통해 생성 된 노란색 삼각형과 녹색 drop-shadow () 및 마지막 (파란색) 모두에 적용되는 재미에 주목하세요. 위의 모든 항목에 적용됩니다. (아마도 .5px 모양과 관련이 있습니다).
그러나 1px보다 더 넓은 모양이 필요한 경우 다음과 같은 ( fiddle ) 변경하여 이러한 드롭 그림자를 서로 구축 할 수 있다고 생각합니다 .
filter: drop-shadow(0 0 2.5px red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red);
첫 번째 것은 블러 반경이 설정되어 있고 (이 경우 2.5px, 결과가 곱해진 것처럼 보임) 나머지는 모두 0에서 블러가 있습니다. 그러나 이것은 모든면에서 동일한 색상에 대해서만 작동하며 결과는 약간 둥글게 보이는 모서리와 상당히 거친 모서리에서 더 커집니다.
참고 URL : https://stackoverflow.com/questions/9450733/css-triangle-custom-border-color
'IT' 카테고리의 다른 글
InvalidOperationException : 'Microsoft.AspNetCore.Http.IHttpContextAccessor'유형에 대한 서비스를 확인할 수 없습니다. (0) | 2020.08.07 |
---|---|
Mac OSX에서 JDK 7을 어떻게 사용합니까? (0) | 2020.08.07 |
double을 반올림하여 int로 변환 (Java) (0) | 2020.08.07 |
요일과 월을 얻는 방법은 무엇입니까? (0) | 2020.08.07 |
한 축을 따라 numpy 배열에서 최대 요소의 보장을 얻는 방법 (0) | 2020.08.07 |