질문자 :Stanislav Shabalin
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>어떻게 그리고 왜 작동합니까?
Alex가 말했듯 이 동일한 너비의 테두리는 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; } <div class="triangle"></div>이것은 당신에게 이것을 제공합니다 :
그러나 상단 테두리는 필요하지 않으므로 너비를 0px 설정하십시오. 200px 의 테두리 하단은 삼각형의 높이를 200px로 만듭니다.
.triangle { border-color: yellow blue red green; border-style: solid; border-width: 0px 200px 200px 200px; height: 0px; width: 0px; } <div class="triangle"></div>그리고 우리는 이것을 얻을 것입니다 :
그런 다음 두 개의 측면 삼각형을 숨기려면 border-color를 투명하게 설정합니다. top-border가 효과적으로 삭제되었으므로 border-top-color도 투명하게 설정할 수 있습니다.
.triangle { border-color: transparent transparent red transparent; border-style: solid; border-width: 0px 200px 200px 200px; height: 0px; width: 0px; } <div class="triangle"></div>마침내 우리는 이것을 얻습니다.
이 기술을 사용하여 삼각형 모양을 만드는 것은 매우 쉽습니다. 이 기술이 어떻게 작동하는지 설명하는 애니메이션을 보고 싶은 사람들은 다음과 같습니다.
그렇지 않으면, 여기에 하나의 요소로 이등변 직각 삼각형을 만드는 방법에 대한 4막(이것은 비극이 아님)에 대한 자세한 설명이 있습니다.
<div class="tr"></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; }첫째, 가장 중요한 것은 변환 원점을 정의하는 것입니다 . 기본 원점 은 의사 요소의 중앙에 있으며 왼쪽 하단에 필요합니다. 이 CSS 를 의사 요소에 추가하면 다음과 같습니다.
transform-origin:0 100%; 또는 transform-origin: left bottom;
이제 transform을 사용하여 의사 요소를 시계 방향으로 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); } 의사 요소의 원하지 않는 부분(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); }데모 에서 볼 수 있듯이 삼각형을 사용자 지정할 수 있습니다.
skewX() 사용하여 더 가늘거나 평평하게 만드십시오.다음은 데모용으로 만든 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; }이것은 간단한 div입니다. 매우 간단한 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 엔터티와 같은 간단한 솔루션을 잊지 마세요.
▲결과:
▲
아래 삼각형을 고려하십시오
.triangle { border-bottom:15px solid #000; border-left:10px solid transparent; border-right:10px solid transparent; width:0; height:0; }이것이 우리에게 주어진 것입니다:
왜 이런 모양으로 나왔을까? 아래 다이어그램은 치수를 설명합니다. 하단 테두리에 15px, 왼쪽과 오른쪽에 10px를 사용했습니다.
오른쪽 테두리를 제거하여 직각 삼각형을 만드는 것도 매우 쉽습니다.
한 단계 더 나아가 이를 기반으로 하는 CSS를 사용하여 뒤로 및 다음 버튼에 화살표를 추가했습니다.
.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>다른 접근 방식. 선형 그래디언트 사용(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>좋아, 이 삼각형은 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>단계를 보기 위해 스니펫을 실행하지 않으려면 하나의 이미지에서 모든 단계를 볼 수 있도록 이미지 시퀀스를 만들었습니다.
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 더 잘 이해하고 자신만의 경로를 만드는 데 도움이 되는 몇 가지 유용한 리소스와 자료입니다.
이것은 오래된 질문이지만 이 삼각형 기술을 사용하여 화살표를 만드는 방법을 공유할 가치가 있다고 생각합니다.
2개의 삼각형을 만들고 두 번째 삼각형에 대해 :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>이제 두 번째 삼각형의 주요 테두리 색상을 동일한 배경 색상으로 설정하기만 하면 됩니다.
.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/
삼각형에 테두리를 적용하려면 다음을 읽으십시오. CSS로 삼각형을 만드시겠습니까?
거의 모든 답변은 테두리를 사용하여 구축된 삼각형에 초점을 맞추므로 linear-gradient 방법을 자세히 설명하겠습니다( @lima_fil 의 답변에서 시작됨).
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 )를 가지며 삼각형 sould의 각 변은 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>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); } 중요 사항:
일부 브라우저에서 삼각형이 픽셀화 된 것처럼 보이면 여기에 설명된 방법 중 하나를 시도하십시오.
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>여기에 또 다른 바이올린이 있습니다.
.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; }다른 사람들은 이미 이것을 잘 설명했습니다. 이것을 빠르게 설명 할 애니메이션 을 제공하겠습니다 : 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; }나는 이것이 오래된 것이라는 것을 알고 있지만 HTML & CSS만을 사용하여 삼각형을 만드는 데 최소한 5가지 다른 방법이 있다는 것을 이 토론에 추가하고 싶습니다.
borders 사용linear-gradientconic-gradienttransform 및 overflowclip-path conic-gradient 사용하여 방법 3을 제외하고 모두 여기에서 다루었다고 생각하므로 여기에서 공유하겠습니다.
.triangle{ width: 40px; height: 40px; background: conic-gradient(at 50% 50%,transparent 135deg,green 0,green 225deg, transparent 0); } <div class="triangle"></div> 
clip-path: polygon(50% 0%, 100% 100%, 0% 100%); 쉽게 삼각형을 만들기 위해
<div class="triangle"></div> .triangle{width:200px; height:200px;background:#000;clip-path: polygon(50% 0%, 100% 100%, 0% 100%);}이 시도:-
.triangle { border-color: transparent transparent red transparent; border-style: solid; border-width: 0px 200px 200px 200px; height: 0px; width: 0px; } <div class="triangle"></div>clip-path는 나에게 가장 좋은 결과를 제공합니다. 고정 치수가 있거나 없는 div/컨테이너에 적합합니다.
.triangleContainer{ position: relative; width: 500px; height: 500px; } .triangleContainer::before{ content: ""; position: absolute; background:blue; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(50% 0, 0 100%, 100% 100%); }출처 : http:www.stackoverflow.com/questions/7073484/how-do-css-triangles-work
| 배열 반복에 "for...in"을 사용하는 것이 나쁜 생각인 이유는 무엇입니까? (0) | 2021.12.20 |
|---|---|
| 이동 의미론이란 무엇입니까? (0) | 2021.12.20 |
| list.join(string) 대신 string.join(list)인 이유는 무엇입니까? (0) | 2021.12.20 |
| 이름(문자열)을 사용하여 모듈의 함수 호출 (0) | 2021.12.20 |
| C++에서 Python보다 stdin에서 줄을 읽는 것이 훨씬 느린 이유는 무엇입니까? (0) | 2021.12.20 |