概要
リンクのアイコンなどに使用する三角アイコンをCSSだけで作ります。
以前、CSSで三角形を作る(border版)の記事を書いたのですが、その方法のclip-path版です。
サンプル
ソース
<div class="triangle-clip-path">
<div class="triangle"></div>
</div>.triangle-clip-path{
aspect-ratio: 3/2;
display: grid;
place-content: center;
border:1px solid #000000;
}
.triangle-clip-path .triangle{
width: 70px;
height: 70px;
background-color: #ff0000;
-webkit-clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}.triangleにスタイルを設定します。
横幅、高さと背景色を決めて、clip-pathで三角形に切り抜きます。
polygon指定は大きさが変わっても良いようにパーセント指定にしています。
ブラウザ対応
polygon使用は問題ないようです。
Can I use(clip-path)
まとめ
以前のborder版よりシンプルでわかりやすいので今後は、こちらを使用していこうと思います。
