CSSで三角形を実装するにはaspect-ratioとclip-pathを使用するのが簡単 -CSS Triangle Shapes
Post on:2024年2月7日
sponsors
HTMLはdiv要素一つだけ（もしくはimg要素一つだけ）、あとはCSSをコピペするだけで三角形を実装できるCSS Triangle Shapesを紹介します。
CSSの三角形は、一昔前はborderで実装していましたが、最近では2つのプロパティ（aspect-ratio, clip-path）で実装します。どうやって実装するんだっけ？ というときに覚えておくと、さくっと利用できるので便利です。
CSSで三角形を実装する最近の方法
まずは、三角形をCSSで実装する方法を見てましょう。
これまでのCSSだと、divなどの矩形にborderプロパティで太いボーダーを設定し、三角形の部分だけ残して使用していました。
|
1 2 3 4 5 6 |
.triangle{ border-top: 100px solid #ccc; border-right: 100px solid transparent; border-bottom: 100px solid transparent; border-left: 100px solid transparent; } |
borderで三角形を実装する仕組み
最近はaspect-ratioとclip-pathで実装します。
※IEを除く、すべてのブラウザにサポートされています。
|
1 2 3 4 |
.triangle { aspect-ratio: 1/cos(30deg); clip-path: polygon(50% 0,100% 100%,0 100%);; } |
aspect-ratioで、三角形の形状を設定。clip-pathの3点ポリゴンで、三角形の各頂点を設定。
このaspect-ratioとclip-pathを使用した実装方法はdiv要素だけでなく、img要素を含むあらゆる種類の要素で機能します。
aspect-ratioとclip-pathで三角形を実装する仕組み
画像: @ChallengesCssより
CSSで三角形を作成するジェネレター
CSS Triangle Shapesを作成したのは以前紹介したCSS Loaders（紹介記事）やCSS Ribbon Shapes（紹介記事）と同じ作者で、前回はCSSで実装されたローダーとリボンでしたが、今回はCSSで三角形です。
使い方は他と同様に簡単、登録など面倒なことは一切不要です。
まずは、サイトにアクセスして、CSSで実装したい三角形を選びます。
「Copy the CSS」をクリックして、CSSをコピーします。
三角形をクリックして、CSSをコピー
では、三角形を実装してみましょう。
HTMLは共通で、div要素一つだけ（もしくはimg要素一つだけ）です。
|
1 |
<div class="triangle"></div> |
あとは、さきほどコピーしたCSSをペーストするだけ。
※コピーしたCSSにはコメントでHTMLも含まれていました。
|
1 2 3 4 5 6 7 |
/* HTML: <div class="triangle"></div> */ .triangle { width: 180px; aspect-ratio: 1/cos(30deg); clip-path: polygon(50% 0,100% 100%,0 100%);; background: linear-gradient(45deg,#FA6900,#C02942); } |
これで簡単に三角形をCSSで実装できます。
参考:
三角形は、img要素でも実装できます。
img要素で実装した三角形
CSSで実装された三角形は現在、48種類ほどあり、さまざまな三角形があります。
sponsors
