clip-path
で三角形を作ってborder
プロパティでborder
を付けようとしたが、borderは上下左右にしか付かないらしくうまくいかず。box-shadow
も同様にダメ。
色々調べた結果、今のところcilp-path
で大きさの違う三角形を作って重ねるのが最適解っぽいので作ってみました。
下記は正三角形の例です。
SCSSの変数の部分を変更すると三角形の大きさやボーダーの幅を変更することができます。
$border: 4px;
$height: 200px;
$width: 200px;
%clip-triangle {
clip-path: polygon(50% 0%, 0% 86.6%, 100% 86.6%);
}
.triangle {
@extend %clip-triangle;
background-color: red;
height: $height;
position: relative;
width: $width;
&::before {
@extend %clip-triangle;
background-color: white;
bottom: calc((100% - 15.4%) / 2);
content: "";
height: $height - ($border * 3.6);
left: 50%;
position: absolute;
transform: translate(-50%, calc((100% - 15.4%) / 2));
width: $width - ($border * 3.6);
}
}
See the Pen Untitled by Simmon (@thisissimmon) on CodePen.