how - CSS 삼각형은 어떻게 작동합니까?




how to css shapes (12)

CSS Tricks 에는 다양한 CSS 모양이 많이 있습니다. CSS의 모양과 특히 삼각형으로 당황합니다.

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
<div id="triangle-up"></div>

어떻게 그리고 왜 작동합니까?


CSS 삼각형 : 다섯 가지 행위에서의 비극

alex가 말했듯이 , 같은 폭의 경계선은 서로 45도 각도로 맞 닿아 있습니다.

위쪽 테두리가 없으면 다음과 같이 보입니다.

그런 다음 너비를 0으로 지정합니다.

... 높이 0 ...

마지막으로 두면 테두리를 투명하게 만듭니다.

그 결과 삼각형이됩니다.


SASS (SCSS) 삼각형 믹스 인

필자는 CSS 삼각형을 자동으로 생성하기 쉽도록 (그리고 DRY) 이것을 작성했습니다 :

// Triangle helper mixin (by Yair Even-Or)
// @param {Direction} $direction - either `top`, `right`, `bottom` or `left`
// @param {Color} $color [currentcolor] - Triangle color
// @param {Length} $size [1em] - Triangle size
@mixin triangle($direction, $color: currentcolor, $size: 1em) {
  $size: $size/2;
  $transparent: rgba($color, 0);
  $opposite: (top:bottom, right:left, left:right, bottom:top);

  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border: $size solid $transparent;
  border-#{map-get($opposite, $direction)}-color: $color;
  margin-#{$direction}: -$size;
}

유스 케이스 예제 :

span {
  @include triangle(bottom, red, 10px);
}

놀이터 페이지

중요 사항:
삼각형이 일부 브라우저에서 픽셀 화 된 것처럼 보이면 here 설명 된 방법 중 하나를 시도 here .


거의 모든 답변은 경계를 사용하여 @lima_fil 삼각형에 초점을 맞추기 때문에 @lima_fil 의 답변에서 시작된 것처럼 linear-gradient 방법을 자세히 설명하려고합니다.

45° 와 같은 차수 값을 사용하면 우리가 원하는 삼각형을 얻기 위해 height/width 의 특정 비율을 존중해야하므로 응답하지 않습니다.

.tri {
  width:100px;
  height:100px;
  background:linear-gradient(45deg, transparent 50%,red 0);
  
  /*To illustrate*/
  border:1px solid;
}
Good one
<div class="tri"></div>
bad one
<div class="tri" style="width:150px"></div>
bad one
<div class="tri" style="height:30px"></div>

이를 수행하는 대신 미리 정의 된 방향 값 (예 to bottom , to top 등) to top 고려해야합니다.이 경우 반응 형을 유지하면서 모든 종류의 삼각형 모양을 얻을 수 있습니다.

1) 사각형 삼각형

그러한 삼각형을 구하기 위해서는 to bottom right , to top left , to bottom left 등의 선형 구배와 대각선 방향이 필요합니다.

.tri-1,.tri-2 {
  display:inline-block;
  width:100px;
  height:100px;
  background:linear-gradient(to bottom left, transparent 49.8%,red 50%);
  border:1px solid;
  animation:change 2s linear infinite alternate;
}
.tri-2 {
  background:linear-gradient(to top right, transparent 49.8%,red 50%);
  border:none;
}

@keyframes change {
  from {
    width:100px;
    height:100px;
  }
  to {
    height:50px;
    width:180px;
  }
}
<div class="tri-1"></div>
<div class="tri-2"></div>

2) 이등변 삼각형

이 경우, 위에서와 같이 2 개의 선형 그래디언트가 필요하며 각각은 너비 (또는 높이)의 절반을 차지합니다. 첫 번째 삼각형의 대칭 이미지를 만드는 것과 같습니다.

.tri {
  display:inline-block;
  width:100px;
  height:100px;
  background-image:
  linear-gradient(to bottom right, transparent 49.8%,red 50%),
  linear-gradient(to bottom left, transparent 49.8%,red 50%);
  background-size:50.5% 100%; /* I use a value slightly bigger than 50% to avoid having a small gap between both gradient*/
  background-position:left,right;
  background-repeat:no-repeat;
  
  animation:change 2s linear infinite alternate;
}


@keyframes change {
  from {
    width:100px;
    height:100px;
  }
  to {
    height:50px;
    width:180px;
  }
}
<div class="tri"></div>

3) 정삼각형

이것은 그라디언트의 높이와 너비 사이의 관계를 유지해야하기 때문에 다루기가 약간 까다 롭습니다. 우리는 위와 같은 삼각형을 가질 것이지만 이등변 삼각형을 등변 삼각형으로 변환하기 위해 계산을 더 복잡하게 만들 것입니다.

쉽게하기 위해 div의 너비가 알려져 있고 높이가 내부에 삼각형을 그릴 수있을만큼 ( height >= width ) 고려해야합니다.

우리는 두 개의 그래디언트 g1g2 있고, 파란색 선은 div w 의 너비이고 각 그래디언트는 그 중 50 % ( w/2 )를 가지고 삼각형의 각 변은 w 같아야합니다. 녹색 선은 기울기 hg 의 높이이고 우리는 쉽게 아래 수식을 얻을 수 있습니다.

(w/2)² + hg² = w² ---> hg = (sqrt(3)/2) * w ---> hg = 0.866 * w

우리는 계산을하고 필요한 결과를 얻기 위해 calc() 에 의존 할 수 있습니다 :

.tri {
  --w:100px;
  width:var(--w);
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49.8%,red 50%),
  linear-gradient(to bottom left, transparent 49.8%,red 50%);
  background-size:calc(var(--w)/2 + 0.5%)  calc(0.866 * var(--w));
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}
<div class="tri"></div>
<div class="tri" style="--w:80px"></div>
<div class="tri" style="--w:50px"></div>

또 다른 방법은 div의 높이를 제어하고 그라데이션 구문을 쉽게 유지하는 것입니다.

.tri {
  --w:100px;
  width:var(--w);
  height:calc(0.866 * var(--w));
  display:inline-block;
  background:
   linear-gradient(to bottom right, transparent 49.8%,red 50%) left,
   linear-gradient(to bottom left,  transparent 49.8%,red 50%) right;
  background-size:50.2% 100%;
  background-repeat:no-repeat;
  
}
<div class="tri"></div>
<div class="tri" style="--w:80px"></div>
<div class="tri" style="--w:50px"></div>

4) 랜덤 삼각형

무작위 삼각형을 얻으려면 각각의 50 % 조건을 제거하기 만하면되지만 두 가지 조건을 유지해야합니다 (둘 다 높이가 같아야하고 두 폭의 합이 100 %이어야 함).

.tri-1 {
  width:100px;
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 50%,red 0),
  linear-gradient(to bottom left, transparent 50%,red 0);
  background-size:20% 60%,80% 60%;
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
 
}
<div class="tri-1"></div>

그러나 각면에 대한 값을 정의하려면 어떻게해야할까요? 우리는 단순히 계산을 다시 할 필요가 있습니다!

그라데이션의 높이 (둘 다 빨간색 선과 같음)로 wg1wg2wg1 다음 그라데이션의 너비를 wg1wg2wg1 + wg2 = a ( wg1 + wg2 = a ). 나는 계산을 자세히 설명하지는 않겠지 만, 그때 우리는 다음과 같이 할 것이다 :

wg2 = (a²+c²-b²)/(2a)
wg1 = a - wg2
hg1 = hg2 = sqrt(b² - wg1²) = sqrt(c² - wg2²)

이제는 calc() 를 사용하더라도 CSS를 사용할 수 없으므로 최종 결과를 수동으로 수집하여 고정 된 크기로 사용하면됩니다.

.tri {
  --wg1: 20px; 
  --wg2: 60px;
  --hg:30px; 
  width:calc(var(--wg1) + var(--wg2));
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 50%,red 0),
  linear-gradient(to bottom left, transparent 50%,red 0);

  background-size:var(--wg1) var(--hg),var(--wg2) var(--hg);
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}
<div class="tri" ></div>

<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;" ></div>

보너스

회전 및 / 또는 비뚤어 짐을 적용 할 수 있다는 것을 잊지 말아야하며 더 많은 삼각형을 얻을 수있는 더 많은 옵션이 있습니다.

.tri {
  --wg1: 20px; 
  --wg2: 60px;
  --hg:30px; 
  width:calc(var(--wg1) + var(--wg2));
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 50%,red 0),
  linear-gradient(to bottom left, transparent 50%,red 0);

  background-size:var(--wg1) var(--hg),var(--wg2) var(--hg);
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}
<div class="tri" ></div>

<div class="tri" style="transform:skewY(25deg)"></div>

<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;" ></div>


<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;transform:rotate(20deg)" ></div>

그리고 물론 어떤 상황에서는 더 적합 할 수있는 SVG 솔루션 을 염두에 두어야합니다.

svg {
 width:100px;
 height:100px;
}

polygon {
  fill:red;
}
<svg viewBox="0 0 100 100"><polygon points="0,100 0,0 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="0,100 50,0 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="0,100 50,23 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="20,60 50,43 80,100" /></svg>



다른 사람들은 이미 이것을 잘 설명해주었습니다. 이 부분을 빠르게 설명 할 애니메이션 을 보내 드리겠습니다. http://codepen.io/chriscoyier/pen/lotjh

여기 당신이 놀고 개념을 배우는 몇 가지 코드가 있습니다.

HTML :

<html>
  <body>
    <div id="border-demo">
    </div>
  </body>
</html>

CSS :

/*border-width is border thickness*/
#border-demo {
    background: gray;
    border-color: yellow blue red green;/*top right bottom left*/
    border-style: solid;
    border-width: 25px 25px 25px 25px;/*top right bottom left*/
    height: 50px;
    width: 50px;
}

이것을 가지고 놀고 무슨 일이 일어나는 지보십시오. 높이와 너비를 0으로 설정하십시오. 그런 다음 위쪽 테두리를 제거하고 왼쪽과 오른쪽을 투명하게 만들거나 아래 코드를보고 CSS 삼각형을 만듭니다.

#border-demo {
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid blue;
}

다른 접근 :

변환 회전이있는 CSS3 삼각형

삼각형 모양은이 기술을 사용하여 매우 쉽게 만들 수 있습니다. 이 기법이 어떻게 작동하는지 설명하는 애니메이션을 보려면 다음과 같이하십시오.

그렇지 않은 경우 여기에 하나의 요소가있는 이등변 직각 삼각형을 만드는 방법에 대한 4 가지 동작 (비극이 아닙니다)에 대한 자세한 설명이 나와 있습니다.

  • 주 1 : 이등변 삼각형이 아닌 삼각형과 멋진 것들에 대해서는 4 단계를 볼 수 있습니다 .
  • 주 2 : 다음 스니 j에서는 벤더 프리픽스가 포함되지 않습니다. 그들은 codepen 데모에 포함되어 있습니다 .
  • 참고 3 : 다음 설명을위한 HTML은 항상 다음과 같습니다. <div class="tr"></div>

1 단계 : div 만들기

쉽게, width = 1.41 x height 인지 확인하십시오. 종횡비를 유지하고 반응이 빠른 삼각형을 만들기 위해 백분율 및 패딩 하단의 사용을 포함하여 모든 기술 전문가 ( 여기 참조 )를 사용할 수 있습니다. 다음 이미지에서 div는 황금색 테두리를가집니다.

해당 div에서 의사 요소를 삽입하고 100 % 너비 및 높이의 부모를 지정하십시오. 의사 요소는 다음 이미지에서 파란색 배경을 갖습니다.

이 시점에서, 우리는이 CSS를 가지고 :

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
}

.tr: before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
}

2 단계 : 회전합시다.

첫째, 가장 중요한 점 은 변환 원점을 정의하는 것입니다 . 기본 원점 은 의사 요소의 중심에 있으며 왼쪽 하단에 필요합니다. 의사 요소에이 CSS 를 추가하면 다음과 같습니다.

transform-origin:0 100%; 또는 transform-origin: left bottom;

이제 우리는 의사 요소를 transform : rotate(45deg); 으로 45도 시계 방향으로 회전시킬 수 있습니다 transform : rotate(45deg);

이 시점에서, 우리는이 CSS를 가지고 :

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
}

.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
    transform-origin: 0 100%;        
    transform: rotate(45deg);
}

3 단계 : 숨기기

의사 요소의 원하지 않는 부분 (노란색 테두리로 div를 오버플로하는 모든 것을 숨기려면)은 단순히 overflow:hidden; 을 설정해야합니다 overflow:hidden; 컨테이너에. 노란 경계를 제거한 후에, 당신은 ... 삼각형 을 얻습니다! :

DEMO

CSS :

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
    overflow: hidden;
}

.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0079C6;
    transform-origin: 0 100%;
    transform: rotate(45deg);
}

4 단계 : 추가 정보 ...

데모 에서 볼 수 있듯이 삼각형을 사용자 정의 할 수 있습니다.

  1. skewX() 로 재생하면 더 얇거나 더 평평 해집니다.
  2. transform orign 및 회전 방향으로 재생하여 왼쪽, 오른쪽 또는 다른 방향을 가리 키도록합니다.
  3. 3D 변형 속성으로 약간의 고찰 을하십시오.
  4. 삼각형 테두리
  5. 삼각형 안에 이미지를 넣으십시오.
  6. 훨씬 더 ... CSS3 의 힘을 발휘하십시오!

왜이 기술을 사용합니까?

  1. 삼각형은 쉽게 반응 할 수 있습니다.
  2. 테두리 가있는 삼각형을 만들 수 있습니다.
  3. 삼각형의 경계를 유지할 수 있습니다. 즉, 커서가 삼각형 안에 있을 때만 호버 상태 또는 클릭 이벤트를 트리거 할 수 있습니다. 이것은 삼각형이 이웃을 오버레이 할 수없는 상황에서 매우 편리 할 수 ​​있습니다. 그래서 각 삼각형은 자신의 호버 상태입니다.
  4. 반사와 같은 멋진 효과를 낼 수 있습니다.
  5. 2D 및 3D 변형 속성을 이해하는 데 도움이됩니다.

이 기법을 사용하지 않는 이유는 무엇입니까?

  1. 가장 큰 단점은 브라우저 호환성입니다 . 2d 변환 속성은 IE9 +에서 지원되므로 IE8을 지원할 계획이라면이 기술을 사용할 수 없습니다. 자세한 내용은 CanIuse 를 참조하십시오. 리플렉션 브라우저 지원과 같은 3D 변환을 사용하는 멋진 효과는 IE10 +입니다 (자세한 정보는 canIuse 참조).
  2. 아무 반응이 없어도 평범한 삼각형이 좋다면 여기에 설명 된 경계 기술 (브라우저 호환성 향상 및 이해하기 쉬운 게시물 덕분에 여기에서 설명)을 수행해야합니다.

다음은 데모 용으로 만든 JSFiddle애니메이션입니다 .

아래의 스 니펫을 참조하십시오.

이것은 Screencast에서 만든 애니메이션 GIF입니다

transforms = [
         {'border-left-width'   :'30', 'margin-left': '70'},
         {'border-bottom-width' :'80'},
         {'border-right-width'  :'30'},
         {'border-top-width'    :'0', 'margin-top': '70'},
         {'width'               :'0'},
         {'height'              :'0', 'margin-top': '120'},
         {'borderLeftColor'     :'transparent'},
         {'borderRightColor'    :'transparent'}
];


$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
		  for ( var i=0; i < transforms.length; i++ ) {
        $(this)
         .animate(transforms[i], duration)
		  }
    }).end()
}(jQuery))
.border {
    margin: 20px 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>

무작위 버전

/**
 * Randomize array element order in-place.
 * Using Durstenfeld shuffle algorithm.
 */
function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

transforms = [
         {'border-left-width'   :'30', 'margin-left': '70'},
         {'border-bottom-width' :'80'},
         {'border-right-width'  :'30'},
         {'border-top-width'    :'0', 'margin-top': '70'},
         {'width'               :'0'},
         {'height'              :'0'},
         {'borderLeftColor'     :'transparent'},
         {'borderRightColor'    :'transparent'}
];
transforms = shuffleArray(transforms)



$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
		  for ( var i=0; i < transforms.length; i++ ) {
        $(this)
         .animate(transforms[i], duration)
		  }
    }).end()
}(jQuery))
.border {
    margin: 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>

한 번에 모든 버전

$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
        $(this)
         .animate({'border-top-width': 0            ,
         					 'border-left-width': 30          ,
         					 'border-right-width': 30         ,
         					 'border-bottom-width': 80        ,
         					 'width': 0                       ,
         					 'height': 0                      ,
                   'margin-left': 100,
                   'margin-top': 150,
         					 'borderTopColor': 'transparent',
         					 'borderRightColor': 'transparent',
         					 'borderLeftColor':  'transparent'}, duration)
    }).end()
}(jQuery))
.border {
    margin: 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>


아래의 삼각형을 고려하십시오.

.triangle {
    border-bottom:15px solid #000;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    width:0;
    height:0;
}

이것이 우리에게 주어진 것입니다 :

왜이 모양으로 나온거야? 아래 다이어그램은 크기를 설명합니다. 아래쪽 테두리에는 15px가 사용되고 왼쪽과 오른쪽에는 10px가 사용되었습니다.

오른쪽 테두리를 제거하여 직각 삼각형을 만드는 것은 꽤 쉽습니다.


우리가 다음 div를 가지고 있다고하자.

<div id="triangle" />

CSS를 단계별로 편집하여 주위 상황을 명확하게 파악할 수 있습니다.

1 단계 : JS 손쉬운 링크 :

 #triangle {
        background: purple;
        width :150px;
        height:150PX;
        border-left: 50px solid black ;
        border-right: 50px solid black;
        border-bottom: 50px solid black;
        border-top: 50px solid black;
    }

이것은 간단한 div입니다. 아주 간단한 CSS로. 그래서 평신도는 이해할 수 있습니다. Div는 경계가 50 픽셀 인 150 x 150 픽셀의 크기를가집니다. 이미지 첨부 :

2 단계 : JS 피 블 링크 :

#triangle {
    background: purple;
    width :150px;
    height:150PX;
    border-left: 50px solid yellow ;
    border-right: 50px solid green;
    border-bottom: 50px solid red;
    border-top: 50px solid blue;
}

이제 방금 4면 모두의 테두리 색을 변경했습니다. 이미지가 첨부됩니다.

단계 : 3 JS 손쉬운 링크 :

#triangle {
    background: purple;
    width :0;
    height:0;
    border-left: 50px solid yellow ;
    border-right: 50px solid green;
    border-bottom: 50px solid red;
    border-top: 50px solid blue;
}

이제 div의 높이 및 너비를 150 픽셀에서 0으로 변경했습니다. 이미지 첨부 됨

4 단계 : JSfiddle:

#triangle {
    background: purple;
    width :0px;
    height:0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
    border-top: 50px solid transparent;
}

이제 나는 모든 경계선을 아래쪽 테두리와 다르게 투명하게 만들었습니다. 이미지는 아래에 첨부되어 있습니다.

5 단계 : JS 손쉬운 링크 :

#triangle {
    background: white;
    width :0px;
    height:0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
    border-top: 50px solid transparent;
}

이제 배경색을 흰색으로 변경했습니다. 이미지가 첨부됩니다.

그러므로 우리는 우리가 필요로하는 삼각형을 얻었다.


이 삼각형은 HTML과 CSS에서 요소의 경계가 함께 작동하는 방식으로 만들어집니다 ...

우리가 일반적으로 1 또는 2 픽셀 경계를 사용하기 때문에 테두리가 동일한 너비로 서로 45도 각도이루는 것을 알지 못합니다. 그리고 너비가 변경되면 각도도 변경됩니다. 아래 작성한 CSS 코드를 실행하십시오.

.triangle {
  width: 100px;
  height: 100px;
  border-left: 50px solid black;
  border-right: 50px solid black;
  border-bottom: 100px solid red;
}
<div class="triangle">
</div>

다음 단계에서 우리는 너비 나 높이가 없습니다.

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid black;
  border-right: 50px solid black;
  border-bottom: 100px solid red;
}
<div class="triangle">
</div>

이제 우리는 다음과 같이 바람직한 삼각형을 만들기 위해 왼쪽과 오른쪽 테두리를 보이지 않게 만듭니다.

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
<div class="triangle"></div>

스 니펫을 실행하여 단계를 확인하지 않으려는 경우 한 이미지의 모든 단계를 살펴보기 위해 이미지 시퀀스를 만들었습니다.


테두리는 교차하는 각진 가장자리를 사용합니다 (동일한 너비 경계와 45 ° 각도이지만 테두리 폭을 변경하면 각도가 기울어 질 수 있음).

jsFiddle .

특정 테두리를 숨김으로써 삼각형 효과를 얻을 수 있습니다 (위에서 다른 부분을 다른 색으로 변경하여 볼 수 있음). transparent 은 삼각형 모양을 이루기 위해 종종 가장자리 색상으로 사용됩니다.


한 걸음 더 나아가, CSS를 사용하여 이것을 바탕으로 내 뒤쪽과 다음 버튼에 화살표를 추가했습니다 (예, 100 % 크로스 브라우저는 아니지만 덜 매끄럽습니다).

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  margin:20px auto;
}

.triangle-down {
  border-bottom:none;
  border-top: 100px solid red;
}

.triangle-left {
  border-left:none;
  border-right: 100px solid red;
  border-bottom: 50px solid transparent;
  border-top: 50px solid transparent;
}

.triangle-right {
  border-right:none;
  border-left: 100px solid red;
  border-bottom: 50px solid transparent;
  border-top: 50px solid transparent;
}

.triangle-after:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid red;
  margin:0 5px;
  content:"";
  display:inline-block;
}

.triangle-after-right:after {
  border-right:none;
  border-left: 5px solid blue;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;

}

.triangle-before:before {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid blue;
  margin:0 5px;
  content:"";
  display:inline-block;
}

.triangle-before-left:before {
  border-left:none;
  border-right: 5px solid blue;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;

}
<div class="triangle"></div>
<div class="triangle triangle-down"></div>
<div class="triangle triangle-left"></div>
<div class="triangle triangle-right"></div>

<a class="triangle-before triangle-before-left" href="#">Back</a>
<a class="triangle-after triangle-after-right" href="#">Next</a>





css-shapes