[CSS]パンくずでよく見かける三角形のリンク可能エリアを見た目と同じ三角形にするテクニック
パンくずでよく見かける三角形の実装方法に注目です。 今までの三角形の作り方は、要素のwidthとheightを0にし、太いborderの一辺を利用していました。しかし、この実装だとリンクは三角形ではなく、矩形になってしまいます。 リンク可能なエリアが、三角形の見た目と同じにする実装方法を紹介します。 Breadcrumb with arrow shaped links 三角形をborderで実装 三角形をtransformで生成 三角形をclip-pathで生成 三角形をborderで実装 まずは、今までの古典的な実装方法です。 リスト要素で実装した各アイテムをFlexboxで横並びに配置し、矢印の三角形をborderで実装します。 三角形をborderで実装 この実装方法は簡単ですが、リンク可能なエリアが矩形になります。そのため、2番目のおしりの三角形は1番目のリンク可能なエリアになって
![[CSS]パンくずでよく見かける三角形のリンク可能エリアを見た目と同じ三角形にするテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/2d4b980ba7bb36ca68e44f445a36a6341ba4bb62/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201801%2F2018022601.png)
要素一つで簡単実装！CSSで三角を作る方法と使い方 | HedgeHog - Web制作の忘備録 -
borderを組み合わせてCSSで三角を作る方法を吹き出しやリストなど実際の使用例とあわせて紹介しています。サイトのリストなんかでよく使われる「▶」は実はCSSで実装できる！ これに気づいたのは恥ずかしながら1週間前です。 それから三角形の使い道をいろいろ調べていると結構利用できるところが多かったので、今更感もありますが記事として書いていこうと思います。 目次 1. CSSで三角形を表示してみる 2. 三角形の仕組み 2.1. 三角形はborderで作られる 2.2. 見せたい三角以外はtransparentで透明にする 2.3. width,heightは0pxに指定 3. 使い所いろいろ 3.1. フロー表示 3.2. 吹き出し 3.3. リストアイコン 4. まとめ 1. CSSで三角形を表示してみる 百聞は一見に如かず！それでは一度つくってみます。 仕組みがわか
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
