CSS Tricks-Shapes of 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 Triangles : 다섯 가지 행위의 비극

마찬가지로 알렉스 상기 45도 각도로 서로에 대해 동일한 폭 엉덩이까지의 테두리 :

상단 테두리가 없으면 다음과 같습니다.

그런 다음 너비를 0으로 지정하십시오 ...

... 높이는 0입니다 ...

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

그 결과 삼각형이 생깁니다.

경계선은 교차되는 각진 모서리를 사용합니다 (너비가 동일한 경계선을 가진 45 ° 각도이지만 경계 너비를 변경하면 각도가 기울어 질 수 있습니다).

div {
  width: 60px;
  border-width: 30px;
  border-color: red blue green yellow;
  border-style: solid;
}

<div></div>

jsFiddle을 살펴보십시오 .

특정 테두리를 숨기면 삼각형 효과를 얻을 수 있습니다 (위에서 볼 수 있듯이 다른 부분을 다른 색으로 지정). transparent삼각형 모양을 얻기 위해 종종 가장자리 색으로 사용됩니다.

기본 사각형과 테두리로 시작하십시오. 각 테두리마다 다른 색이 지정되어 구분할 수 있습니다.

.triangle {
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 200px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

이것은 당신에게 이것을 제공합니다 :

그러나 상단 테두리가 필요하지 않으므로 너비를로 설정하십시오 0px. 이제 테두리 하단이 200px삼각형을 200px로 만듭니다.

.triangle {
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

그리고 우리는 이것을 얻을 것입니다 :

그런 다음 양쪽 삼각형을 숨기려면 border-color를 투명하게 설정하십시오. 상단 테두리가 효과적으로 삭제되었으므로 경계 상단 색상도 투명하게 설정할 수 있습니다.

.triangle {
    border-color: transparent transparent red transparent;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

마침내 우리는 이것을 얻 습니다 :

다른 접근법 :

변형 회전 CSS3 삼각형

이 기술을 사용하면 삼각형 모양을 쉽게 만들 수 있습니다. 이 기법이 어떻게 작동하는지 설명하는 애니메이션을 선호하는 사람들에게는 다음과 같습니다.

• 애니메이션 링크 : CSS3 삼각형 을 만드는 방법 .
• 그리고 DEMO : 변환으로 만든 CSS3 삼각형 이 회전합니다.

그렇지 않으면, 여기에 하나의 요소로 이등변 직각 삼각형을 만드는 방법에 대한 4 가지 행위 (이것은 비극이 아닙니다)에 대한 자세한 설명이 있습니다.

• 참고 1 : 이등변 삼각형이 아닌 멋진 물건의 경우 4 단계를 볼 수 있습니다 .
• 참고 2 : 다음 스 니펫에는 공급 업체 접두사가 포함되지 않습니다. 그것들은 codepen 데모에 포함되어 있습니다 .
• 참고 3 : 다음 설명을위한 HTML은 항상 다음과 같습니다. <div class="tr"></div>

1 단계 : 사업부 만들기

쉽게 확인하십시오 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;

이제 의사 요소를 시계 방향으로 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;컨테이너 에 설정 하면됩니다. 노란색 테두리를 제거한 후 TRIANGLE ! :

데모

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. 변환 방향 및 회전 방향으로 재생하여 왼쪽, 오른쪽 또는 다른 방향을 가리 킵니다.
3. 3D 변형 속성으로 약간의 반사 를 만듭니다 .
4. 삼각형 테두리를 줘
5. 삼각형 안에 이미지를 넣습니다
6. 훨씬 더 ... CSS3 의 힘을 발휘하십시오 !

왜이 기술을 사용합니까?

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

왜이 기술을 사용하지 않습니까?

1. 주요 단점은 브라우저 호환성입니다 . 2d 변환 속성은 IE9 +에서 지원되므로 IE8을 지원할 계획이라면이 기술을 사용할 수 없습니다. 자세한 정보는 CanIuse 를 참조하십시오 . 리플렉션 브라우저 지원 과 같은 3D 변환을 사용하는 멋진 효과 는 IE10 +입니다 (자세한 내용은 canIuse 참조 ).
2. 반응 형의 것이 필요하지 않으며 일반 삼각형이 좋습니다. 여기에 설명 된 테두리 기술을 사용해야합니다. 여기에는 amaizing 게시물 덕분에 브라우저 호환성이 향상되고 이해하기 쉽습니다.

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

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

스크린 캐스트로 만든 애니메이션 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>

다음과 같은 div가 있다고 가정 해 봅시다.

<div id="triangle" />

이제 CSS를 단계별로 편집하면 주위에서 무슨 일이 일어나고 있는지 알 수 있습니다.

1 단계 : JSfiddle 링크 :

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

이것은 간단한 사업부입니다. 매우 간단한 CSS. 그래서 평신도가 이해할 수 있습니다. Div의 크기는 150 x 150 픽셀이며 테두리는 50 픽셀입니다. 이미지가 첨부됩니다 :

2 단계 : JSfiddle 링크 :

#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면의 테두리 색상을 변경했습니다. 이미지가 첨부되었습니다.

STEP : 3 JSfiddle 링크 :

#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 단계 : JSfiddle 링크 :

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

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

따라서 우리는 필요한 삼각형을 얻었습니다.

그리고 지금 완전히 다른 무언가가 ...

CSS 트릭을 사용하는 대신 html 엔티티만큼 간단한 솔루션을 잊지 마십시오.

▲

결과:

▲

참조 : 위쪽 및 아래쪽 삼각형의 HTML 엔터티는 무엇입니까?

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

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

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

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

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

한 걸음 더 나아가서 이것을 기반으로 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>

좋아, 이 삼각형은 요소의 테두리가 HTML과 CSS에서 함께 작동하는 방식 때문에 만들어 질 것입니다 ...

일반적으로 1 또는 2px 테두리를 사용하므로 테두리 가 동일한 너비로 서로 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>

스 니펫을 실행하여 단계를 보지 않으려는 경우 하나의 이미지에서 모든 단계를 볼 수 있도록 이미지 시퀀스를 만들었습니다.

다른 접근법. 선형 그라디언트 사용 (IE의 경우 IE 10+ 만 해당) 모든 각도를 사용할 수 있습니다 :

.triangle {
    margin: 50px auto;
    width: 100px;
    height: 100px;
/* linear gradient */
    background: -moz-linear-gradient(-45deg,  rgba(255,0,0,0) 0%, rgba(255,0,0,0) 50%, rgba(255,0,0,1) 50%, rgba(255,0,0,1) 100%);
 /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,1)), color-stop(100%,rgba(255,0,0,1)));
 /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* IE10+ */
    background: linear-gradient(135deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* W3C */;
}

<div class="triangle"></div>

여기 jsfiddle이 있습니다

CSS clip-path

이것은 내가이 질문을 놓쳤다 고 느끼는 것입니다. clip-path

clip-path 간단히 말해서

이 clip-path속성을 사용한 클리핑 은 직사각형 종이에서 모양 (원 또는 오각형과 같은)을 자르는 것과 유사합니다. 이 속성은 " CSS Masking Module Level 1 "사양에 속합니다 . 스펙은 "CSS 마스킹은 시각적 요소의 일부 또는 전부를 숨기는 두 가지 수단을 제공합니다 : 마스킹 및 클리핑".

• 스매싱 매거진에서 추출

clip-path매개 변수에서 지정한 모양을 자르기 위해 테두리 대신 요소 자체를 사용합니다. 그것은 매우 간단한 백분율 기반의 좌표 시스템을 사용하여 매우 쉽게 편집 할 수 있으며 몇 분 만에 이상하고 멋진 모양을 만들 수 있습니다.

삼각형 모양 예

div {
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: red;
  width: 100px;
  height: 100px;
}

<div></div>

단점

현재 주요 단점이 있습니다. 지원이 부족하다는 점입니다. -webkit-브라우저 에서만 적용되고 IE에서는 지원되지 않으며 FireFox에서는 부분적으로 만 지원됩니다.

자원

다음은 이해를 높이고 clip-path자신 만의 창작을 시작하는 데 도움이되는 유용한 자료와 자료 입니다.

• Clippy- clip-path발전기
• W3C 후보 추천 파일
• MDN clip-path문서
• clip-path 브라우저 지원

이것은 오래된 질문이지만이 삼각형 기술을 사용하여 화살표를 만드는 방법을 공유 할 가치가 있다고 생각합니다.

1 단계:

두 개의 삼각형을 만들 수 있습니다. 두 번째 삼각형은 :after의사 클래스 를 사용 하고 다른 클래스 바로 아래에 배치합니다.

.arrow{
    width: 0;
    height: 0;
    border-radius: 50px;
    display: inline-block;
    position: relative;
}

    .arrow:after{
        content: "";
        width: 0;
        height: 0;
        position: absolute;
    }


.arrow-up{
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid #333;
}
    .arrow-up:after{
         top: 5px;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
         border-bottom: 50px solid #ccc;
         right: -50px;
    }

<div class="arrow arrow-up"> </div>

2 단계

이제 두 번째 삼각형의 주요 테두리 색상을 배경의 동일한 색상으로 설정해야합니다.

.arrow{
    width: 0;
    height: 0;
    border-radius: 50px;
    display: inline-block;
    position: relative;
}

    .arrow:after{
        content: "";
        width: 0;
        height: 0;
        position: absolute;
    }


.arrow-up{
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid #333;
}
    .arrow-up:after{
         top: 5px;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
         border-bottom: 50px solid #fff;
         right: -50px;
    }

<div class="arrow arrow-up"> </div>

모든 화살표가있는 바이올린 :
http://jsfiddle.net/tomsarduy/r0zksgeu/

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

운동장 페이지

중요 사항 : 일부 브라우저에서
삼각형이 픽셀 화 되어있는 경우 여기에 설명 된 방법 중 하나를 시도 하십시오 .

^{삼각형에 테두리를 적용하려면 다음을 읽으십시오. CSS로 삼각형을 만드시겠습니까?}

거의 모든 답변은 테두리를 사용하여 작성된 삼각형에 초점을 맞추므로 @lima_fillinear-gradient 의 답변에서 시작된 방법 을 자세히 설명 하겠습니다 .

같은 정도 값을 사용하면 원하는 삼각형을 얻기 위해 45°특정 비율을 존중해야 height/width하며 반응하지 않습니다.

.tri {
  width:100px;
  height:100px;
  background:linear-gradient(45deg, transparent 49.5%,red 50%);
  
  /*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응답 성을 유지하면서 우리가 삼각형 모양의 어떤 종류를 얻을 수 있습니다이 경우, 등.

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.5%,red 50%);
  border:1px solid;
  animation:change 2s linear infinite alternate;
}
.tri-2 {
  background:linear-gradient(to top right, transparent 49.5%,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.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);
  background-size:50.3% 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).

우리는 두 개의 그라디언트를 가지고 g1있으며 g2, 파란색 선은 너비 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.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);
  background-size:calc(var(--w)/2 + 0.5px)  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>

그러나 각 측면의 값을 정의하려면 어떻게해야합니까? 우리는 단순히 다시 계산해야합니다!

의 정의하자 hg1및 hg2다음 우리 그라데이션의 높이로 (모두 적색 라인 동일하다) wg1와 wg2우리 그래디언트의 폭 ( 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 49.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);

  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) - 0.5px);
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49%,red 50%),
  linear-gradient(to bottom left,  transparent 49%,red 50%);

  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>

여기 또 다른 바이올린이 있습니다.

.container:after {
    position: absolute;
    right: 0;
    content: "";
    margin-right:-50px;
    margin-bottom: -8px;
    border-width: 25px;
    border-style: solid;
    border-color: transparent transparent transparent #000;
    width: 0;
    height: 0;
    z-index: 10;
    -webkit-transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out;
    transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out;
    bottom: 21px;
}
.container {
    float: left;
    margin-top: 100px;
    position: relative;
    width: 150px;
    height: 80px;
    background-color: #000;
}

.containerRed {
    float: left;
    margin-top: 100px;
    position: relative;
    width: 100px;
    height: 80px;
    background-color: red;
}

https://jsfiddle.net/qdhvdb17/

다른 사람들은 이미 이것을 잘 설명했습니다. 이것을 빨리 설명 할 애니메이션 을 드리겠습니다. 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;
}

당신이 주위를 재생하려면 border-size, width그리고 height그 다른 모양을 만들 수있는 방법을 참조,이 시도 :

const sizes = [32, 32, 32, 32];
const triangle = document.getElementById('triangle');

function update({ target }) {
  let index = null;
  
  if (target) {
    index = parseInt(target.id);

    if (!isNaN(index)) {
      sizes[index] = target.value;
    }
  }
  
  window.requestAnimationFrame(() => {
    triangle.style.borderWidth = sizes.map(size => `${ size }px`).join(' ');
    
    if (isNaN(index)) {
      triangle.style[target.id] = `${ target.value }px`;
    }
  });
}

document.querySelectorAll('input').forEach(input => {
  input.oninput = update;
});

update({});

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#triangle {
    border-style: solid;
    border-color: yellow magenta blue black;
    background: cyan;
    height: 0px;
    width: 0px;
}

#controls {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  box-shadow: 0 0 32px rgba(0, 0, 0, .125);
}

#controls > div {
  position: relative;
  width: 25%;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
}

input {
  margin: 0;
  width: 100%;
  position: relative;
}

<div id="triangle" style="border-width: 32px 32px 32px 32px;"></div>

<div id="controls">
  <div><input type="range" min="0" max="128" value="32" id="0" /></div>
  <div><input type="range" min="0" max="128" value="32" id="1" /></div>
  <div><input type="range" min="0" max="128" value="32" id="2" /></div>
  <div><input type="range" min="0" max="128" value="32" id="3" /></div>
  <div><input type="range" min="0" max="128" value="0" id="width" /></div>
  <div><input type="range" min="0" max="128" value="0" id="height" /></div>
</div>

이 시도:-

.triangle {
    border-color: transparent transparent red transparent;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

<div class="triangle"></div>

나는 이것이 오래된 것임을 알고 있지만 HTML & CSS만으로 삼각형 을 만드는 적어도 5 가지 방법이 있다는 것을이 토론에 추가하고 싶습니다 .

1. 사용 borders
2. 사용 linear-gradient
3. 사용 conic-gradient
4. 사용 transform하여overflow
5. 사용 clip-path

나는 방법 3을 제외하고는 모두를 사용하여 여기에서 다룬다 고 생각합니다 conic-gradient. 그래서 여기에서 공유 할 것입니다.

.triangle{
        width: 40px;
        height: 40px;
        background: conic-gradient(at 50% 50%,transparent 135deg,green 0,green 225deg, transparent 0);
    }

<div class="triangle"></div>