HTMLとCSSで三角形を実装する

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

CSSの三角形は、一昔前はborderで実装していたが、最近では2つのプロパティ（aspect-ratio, clip-path）で実装できる。

従来の実装方法

これまでのCSSだと、divなどの矩形にborderプロパティで太いボーダーを設定し、三角形の部分だけ残して使用していた。

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

最近の実装方法

最近はaspect-ratioとclip-pathで実装できる。この実装方法はdiv要素だけでなく、img要素を含むあらゆる種類の要素で機能する。

  • aspect-ratioで、三角形の形状を設定
  • clip-pathの3点ポリゴンで、三角形の各頂点を設定
.triangle {
  width: 180px;
  aspect-ratio: 1/cos(30deg);
  clip-path: polygon(50% 0,100% 100%,0 100%);
  background: linear-gradient(45deg,#FA6900,#C02942);
}

【CSSで三角形を作成するジェネレータ】
https://css-generators.com/triangle-shapes/

inserted by FC2 system