[css] CSS 삼각형 사용자 정의 테두리 색상

Program / 글쓴이

내 CSS 삼각형 (테두리)에 사용자 지정 16 진수 색상을 사용하려고합니다. 그러나 테두리 속성을 사용하기 때문에 어떻게해야할지 잘 모르겠습니다. 나는 단순히 호환성 때문에 자바 스크립트와 CSS3를 피하고 싶습니다. 나는 삼각형이 # CAD5E0 색상의 1px 테두리 (삼각형의 각진 측면 주위)가있는 흰색 배경을 갖도록 노력하고 있습니다. 이게 가능해? 지금까지 내가 가진 내용은 다음과 같습니다.

.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;
}

여기에 Fiddle 업데이트

여기에 이미지 설명 입력

답변

나는 당신이 그것을 받아들이지 만 더 적은 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);
}

http://jsfiddle.net/4ZeCz/3/

답변

나는 이것이 clip-path를 사용하는 더 간단한 것이라고 생각 합니다 .

.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>

스 니펫 확장

답변

이 작업을 수행하는 또 다른 방법은, 특히 제가했던 것처럼 정삼각형 또는 스케일링 삼각형으로 작업하기 위해 이것을 필요로하는 사람을 위해 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으로 설정됩니다. 그러나 이것은 모든면에서 동일한 색상에 대해서만 작동하며 결과는 약간 둥글게 보이는 모서리와 상당히 거친 모서리에서 더 커집니다.

답변

.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;
}

답변