CSS3:borderで作る三角
吹き出しやコーナーリボンなどの装飾を作る際には欠かせないテクニックであるらしい
code:css
.tri{
width: 0;
height: 0;
border-top: 100px #f44336 solid; //赤
border-right: 100px #2196f3 solid; //青
border-bottom: 100px #4caf50 solid; //緑
border-left: 100px #ffc107 solid; //黄
}
code:css
.triangle{
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid black;
}
.triangle1{
width: 0;
height: 0;
border-left: 30px solid black;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
}
.triangle2{
width: 0;
height: 0;
border-top: 30px solid transparent;
border-right: 30px solid black;
border-bottom: 30px solid transparent;
}
.triangle3{
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid black;
}
正三角形をつくる
$ \frac{\sqrt3}{2} \fallingdotseq 0.866 なので、高さを0.866倍にする
code:css
.triangle-up-equilateral {
--side-size: 20px;
border-left: var(--side-size) solid transparent;
border-right: var(--side-size) solid transparent;
border-bottom: calc(2 * var(--side-size) * 0.866) solid green;
border-top: var(--side-size) solid transparent;
display: inline-block;
}
矢印（ > ）っぽいもの
code:css
.arrow{
width: 30px;
height: 30px;
border: 5px solid;
border-color: #565656 #565656 transparent transparent;
transform: rotate(45deg);
}
.arrow1{
width: 30px;
height: 30px;
border: 5px solid;
border-color: transparent transparent #565656 #565656;
transform: rotate(-45deg);
}
.arrow2{
width: 30px;
height: 30px;
border: 5px solid;
border-color: #565656 #565656 transparent transparent;
transform: rotate(-45deg);
}
.arrow3{
width: 30px;
height: 30px;
border: 5px solid;
border-color: transparent transparent #565656 #565656;
transform: rotate(45deg);
}
CSS:ボーダー
#CSS3
https://img.shields.io/badge/CSS3-borderで作る三角-1572B6.svg?logo=css3&style=for-the-badge