CSS 삼각형은 어떻게 작동합니까?
CSS 트릭에는 다양한 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 삼각형: 5막의 비극
알렉스가 말했듯이, 너비가 같은 테두리는 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우리 삼각형을 200미터 높이로 만들 것입니다.
.triangle {
border-color: yellow blue red green;
border-style: solid;
border-width: 0px 200px 200px 200px;
height: 0px;
width: 0px;
}<div class="triangle"></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>마침내 우리는 이것을 얻습니다.
다른 접근법: 변환이 있는 CSS3 삼각형 회전
삼각형 모양은 이 기술을 사용하여 만들기가 꽤 쉽습니다.이 기술이 어떻게 작동하는지 설명하는 애니메이션을 보고 싶어 하는 사람들을 위해 다음과 같습니다.
- ANIMATION 링크 : CSS3 삼각형 만드는 법
- 그리고 DEMO : 변환으로 만들어진 CSS3 삼각형이 회전합니다.
그렇지 않으면, 여기에 하나의 원소로 이등변 직각 삼각형을 만드는 방법에 대한 4막의 자세한 설명이 있습니다(이것은 비극이 아닙니다).
- 주 1: 이등변 삼각형이 아닌 것과 화려한 것의 경우 4단계를 볼 수 있습니다.
- 참고 2: 다음 스니펫에는 벤더 접두사가 포함되어 있지 않습니다. 그것들은 코드펜 데모에 포함되어 있습니다.
- 참고 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;노란색 테두리를 제거하면...삼각형!:
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 변환 특성을 이해하는 데 도움이 됩니다.
왜 이 기술을 사용하지 않습니까?
- 주요 단점은 브라우저 호환성입니다. IE9+에서 2d 변환 속성을 지원하므로 IE8을 지원할 계획이라면 이 기술을 사용할 수 없습니다.자세한 내용은 사용할 수 있습니까를 참조하십시오.반사 브라우저 지원과 같이 3D 변환을 사용하는 일부 고급 효과의 경우 IE10+를 사용할 수 있습니다(자세한 내용은 사용할 수 있습니까?
- 반응하는 것은 필요 없고 일반 삼각형만 있으면 됩니다. 그러면 여기에 설명된 테두리 기술로 이동해야 합니다. 브라우저 호환성이 향상되고 여기에 있는 놀라운 게시물 덕분에 이해하기 쉽습니다.
여기 제가 시연을 위해 만든 JSFidle의 애니메이션이 있습니다.
아래의 토막글도 참조하십시오.
스크린캐스트로 만든 애니메이션 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단계: JS Fiddle 링크:
#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의 크기는 테두리가 50픽셀인 150x150픽셀입니다.이미지가 첨부됩니다.
2단계: JS Fiddle 링크:
#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 Fiddle 링크:
#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단계: JS Fidle:
#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 Fiddle 링크:
#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>clip-path
이것은 이 질문이 놓쳤다고 생각하는 것입니다.clip-path
clip-path핑리,
clip-path속성은 직사각형 종이에서 모양(원 또는 오각형 모양)을 자르는 것과 비슷합니다.속성은 "CSS 마스킹 모듈 레벨 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그리고 자신만의 것을 만들기 시작합니다.
다른 접근 방식.선형 구배가 있는 경우(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입니다.
좋아요, 이 삼각형은 요소의 경계가 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>단계를 보기 위해 스니펫을 실행하지 않으려는 경우 한 이미지의 모든 단계를 볼 수 있도록 이미지 시퀀스를 만들었습니다.
이것은 오래된 질문이지만, 저는 이 삼각형 기술을 사용하여 화살표를 만드는 방법을 공유할 가치가 있다고 생각합니다.
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//r0zksgeu/http://jsfiddle.net/tomsarduy/r0zksgeu/
삼각형에 테두리를 적용하고 싶다면 CSS로 삼각형을 만들까요?
거의 모든 답은 테두리를 사용하여 만든 삼각형에 초점을 맞추고 있으므로 저는 다음과 같이 자세히 설명하려고 합니다.linear-gradientmethod(@fil_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이을 유지하면서 모양을 수 . 이 경우 우리는 반응성을 유지하면서 어떤 종류의 삼각형 모양도 얻을 수 있습니다.
직사각형 삼각형
이러한 삼각형을 얻기 위해서는 다음과 같은 하나의 선형 기울기와 대각선 방향이 필요합니다.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개 필요하며 각각 폭(또는 높이)의 절반을 차지합니다.마치 첫 번째 삼각형의 거울 이미지를 만드는 것과 같습니다.
.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>정삼각형
이것은 경사도의 높이와 너비 사이의 관계를 유지해야 하기 때문에 다루기가 좀 까다롭습니다.위와 같은 삼각형을 가지지만 이등변 삼각형을 등변 삼각형으로 변환하기 위해 계산을 더 복잡하게 만들 것입니다.
, , 안에 수 입니다. (게의위하우리해쉽서너것알안다니입것그고수있크정할려을을는릴다로도에있려고삼을각형높이져리우의가기비가의▁to▁inside▁is▁is쉽▁(▁we▁(▁consider▁the▁our▁that▁height것다▁will▁triangle니입▁make▁it,▁div▁the▁easy▁our▁enough고것▁and▁big▁known할▁be)height >= width).
우리는 두 개의 그라데이션을 가지고 있습니다.g1그리고.g2의 입니다.div w의 그라데이션은 의 비율을 가질 입니다.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>난삼각형
랜덤 삼각형을 얻으려면 각 삼각형의 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²)
이제 우리는 CSS의 한계에 도달했습니다.calc()이를 구현할 수 없으므로 최종 결과를 수동으로 수집하여 고정 크기로 사용하면 됩니다.
.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>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);
}
놀이터 페이지
중요한 참고:
일부 브라우저에서 삼각형이 픽셀화된 것 같으면 여기에 설명된 방법 중 하나를 사용해 보십시오.
만약 당신이 가지고 놀고 싶다면.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;
}
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;
}
저는 이것이 오래된 것이라는 것을 알지만, 저는 이 토론에 HTML과 CSS만을 사용하여 삼각형을 만드는 최소 5가지의 다른 방법이 있다는 것을 추가하고 싶습니다.
- 용사를 합니다.
borders - 용사를 합니다.
linear-gradient - 용사를 합니다.
conic-gradient - 용사를 합니다.
transform그리고.overflow - 용사를 합니다.
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>
사용하다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%);}
여기 있는 다른 답변을 읽어보니 CSS 삼각형이 왜 그렇게 작동하는지에 대한 훌륭한 설명이 있습니다.저는 그것이 일반적으로 적용할 수 있는 것에 비해 다소 속임수라고 생각합니다.
읽기 쉽고 유지 관리하기 쉬운 것을 위해 SVG에서 지오메트리를 정의하는 것이 좋습니다.
를그를런다음환할수습다있 SVG니변데를 하여 데이터 할 수 .data:image/svg+xml,접두어데이터 uri로서, 그것은 이제 사용될 수 있습니다.background-imageCSS로. 및 색을 할 수 .SVG는 일반 텍스트이므로 지오메트리, 스트로크 및 채우기 색을 쉽게 업데이트할 수 있습니다.
div.tri {
width: 100px;
height: 100px;
display: inline-block;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="red" d="M31.345 29H1.655L16.5 1.96z"/></svg>');
}<div>
<div class="tri"></div>
<div class="tri"></div>
<div class="tri"></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>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%);
}
언급URL : https://stackoverflow.com/questions/7073484/how-do-css-triangles-work
'IT' 카테고리의 다른 글
| Android "뷰 계층 구조를 만든 원본 스레드만 뷰를 터치할 수 있습니다." (0) | 2023.06.27 |
|---|---|
| mongodb 및 C# 단위 작업 (0) | 2023.06.27 |
| 명령행에서 직접 iOS 기기에서 반응 네이티브 애플리케이션을 실행하시겠습니까? (0) | 2023.06.27 |
| Oracle에서 LIKE 'string'과 = 'string'을 사용할 때 성능에 어떤 영향을 미칩니까? (0) | 2023.06.27 |
| 조건부 JOIN 문 SQL Server (0) | 2023.06.27 |