【CSS】三角形にborderをつける方法

clip-pathで三角形を作ってborderプロパティでborderを付けようとしたが、borderは上下左右にしか付かないらしくうまくいかず。 box-shadowも同様にダメ。

色々調べた結果、今のところcilp-pathで大きさの違う三角形を作って重ねるのが最適解っぽいので作ってみました。

下記は正三角形の例です。 SCSSの変数の部分を変更すると三角形の大きさやボーダーの幅を変更することができます。

loading...

loading...

参考

• CSS clip-path border
• css shapes – How to add border in my clip-path: polygon(); CSS style – Stack Overflow