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도 각도로 서로에 대해 동일한 폭 엉덩이까지의 테두리 :

경계는 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 삼각형

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

GIF 애니메이션 : 변환 회전으로 삼각형을 만드는 방법

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

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

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

1 단계 : 사업부 만들기

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

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

변형 roate 단계 1로 CSS 삼각형 만들기

이 시점에서 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);

CSS3 2 단계로 삼각형 만들기

이 시점에서 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 삼각형

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 단계 : 더 나아가 …

데모에 표시된대로 삼각형을 사용자 정의 할 수 있습니다.

을 (를) 사용하여 더 얇거나 더 평평하게 만듭니다 skewX().
변환 방향 및 회전 방향으로 재생하여 왼쪽, 오른쪽 또는 다른 방향을 가리 킵니다.
3D 변형 속성으로 약간의 반사 를 만듭니다 .
삼각형 테두리를 줘
삼각형 안에 이미지를 넣습니다
훨씬 더 … CSS3 의 힘을 발휘하십시오 !

왜이 기술을 사용합니까?

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

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

주요 단점은 브라우저 호환성입니다 . 2d 변환 속성은 IE9 +에서 지원되므로 IE8을 지원할 계획이라면이 기술을 사용할 수 없습니다. 자세한 정보는 CanIuse 를 참조하십시오 . 리플렉션 브라우저 지원 과 같은 3D 변환을 사용하는 멋진 효과 는 IE10 +입니다 (자세한 내용은 canIuse 참조 ).
반응 형의 것이 필요하지 않으며 일반 삼각형이 좋습니다. 여기에 설명 된 테두리 기술을 사용해야합니다. 여기에는 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 엔티티만큼 간단한 솔루션을 잊지 마십시오.

&#9650;

결과:

▲

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