[CSS]パンくずでよく見かける三角形のリンク可能エリアを見た目と同じ三角形にするテクニック

パンくずでよく見かける三角形の実装方法に注目です。
今までの三角形の作り方は、要素のwidthとheightを0にし、太いborderの一辺を利用していました。しかし、この実装だとリンクは三角形ではなく、矩形になってしまいます。

リンク可能なエリアが、三角形の見た目と同じにする実装方法を紹介します。

サイトのキャプチャ

Breadcrumb with arrow shaped links

三角形をborderで実装

まずは、今までの古典的な実装方法です。
リスト要素で実装した各アイテムをFlexboxで横並びに配置し、矢印の三角形をborderで実装します。

デモのキャプチャ

三角形をborderで実装

この実装方法は簡単ですが、リンク可能なエリアが矩形になります。そのため、2番目のおしりの三角形は1番目のリンク可能なエリアになってしまいます。

HTMLは非常にシンプルで、a要素をリストで実装します。

CSSはまずは、全共通のスタイルから。

生成した要素のwidthとheightを0にし、borderで三角形を作成します。

三角形をtransformで生成

この方法では::beforeは使用せず、::afterのみで実装した要素をtransformで変形させて三角形にします。

デモのキャプチャ

リンク可能なエリアは、見た目と同じです。斜めのラインでリンクが変化します。

HTMLはulのclassが異なるだけで、同じです。

三角形にするには、transformのskewで要素を傾斜変形させて菱形にし、rotateで回転させます。

三角形をclip-pathで生成

最後の方法は、clip-path: polygon()を使用して三角形を作成します。
この実装の利点は三角形に限らず、他の形にすることもできることです。

デモのキャプチャ

リンク可能なエリアは、見た目と同じです。
clip-path: polygon()は、IEはサポート外です。

HTMLはulのclassが異なるだけで、同じです。

::beforeと::afterで生成した要素をclip-path: polygon()で三角形に切り抜きます。

sponsors

top of page

©2024 coliss