2024年02月7日(水)

CSSで三角形を実装するにはaspect-ratioとclip-pathを使用するのが簡単 -CSS Triangle Shapes

• 0
• 28
• 62
• 51

HTMLはdiv要素一つだけ（もしくはimg要素一つだけ）、あとはCSSをコピペするだけで三角形を実装できるCSS Triangle Shapesを紹介します。

CSSの三角形は、一昔前はborderで実装していましたが、最近では2つのプロパティ（aspect-ratio, clip-path）で実装します。どうやって実装するんだっけ？ というときに覚えておくと、さくっと利用できるので便利です。

CSS Triangle Shapes

CSSで三角形を実装する最近の方法

まずは、三角形をCSSで実装する方法を見てましょう。
これまでのCSSだと、divなどの矩形にborderプロパティで太いボーダーを設定し、三角形の部分だけ残して使用していました。

.triangle{ border-top: 100px solid #ccc; border-right: 100px solid transparent; border-bottom: 100px solid transparent; border-left: 100px solid transparent; }

...