CSSで三角形を作る(clip-path版)

  • Updated: 2022.12.28
  • Published: 2022.12.28
  • 868views

概要

リンクのアイコンなどに使用する三角アイコンを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版よりシンプルでわかりやすいので今後は、こちらを使用していこうと思います。

関連記事

人気の投稿

最新の投稿

タグ

月別アーカイブ

Contact

WEB制作の依頼など気軽にお問い合わせください。

お問い合わせ