[CSS]パンくずでよく見かける三角形のリンク可能エリアを見た目と同じ三角形にするテクニック
Post on:2018年2月26日
sponsors
パンくずでよく見かける三角形の実装方法に注目です。
今までの三角形の作り方は、要素のwidthとheightを0にし、太いborderの一辺を利用していました。しかし、この実装だとリンクは三角形ではなく、矩形になってしまいます。
リンク可能なエリアが、三角形の見た目と同じにする実装方法を紹介します。
Breadcrumb with arrow shaped links
三角形をborderで実装
まずは、今までの古典的な実装方法です。
リスト要素で実装した各アイテムをFlexboxで横並びに配置し、矢印の三角形をborderで実装します。
三角形をborderで実装
この実装方法は簡単ですが、リンク可能なエリアが矩形になります。そのため、2番目のおしりの三角形は1番目のリンク可能なエリアになってしまいます。
HTMLは非常にシンプルで、a要素をリストで実装します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<ul class="border-as-triangle"> <li> <a href="#1">Link</a> </li> <li> <a href="#2">Link</a> </li> <li class="active"> <span class="a">Active</span> </li> <li> <a href="#4">Link</a> </li> <li> <span class="a">No link</span> </li> </ul> |
CSSはまずは、全共通のスタイルから。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
ul { padding: 0 50px 0 0; list-style: none; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 1.3rem; } li { display: block; white-space: nowrap; } li:first-of-type a, li:first-of-type .a { padding-left: 35px; border-left: 1px solid #336; } li.active a, li.active .a { background: #003; color: #ddd; } li .a { cursor: default; } a, .a { border-top: 1px solid #336; border-bottom: 1px solid #336; padding: 0 15px 0 60px; display: inline-block; position: relative; line-height: 80px; text-decoration: none; color: #336; background: #ddd; } a:hover { color: #ddd; background: #336; } |
生成した要素のwidthとheightを0にし、borderで三角形を作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
.border-as-triangle li.active a::before, .border-as-triangle li.active .a::before { border-left-color: #003; } .border-as-triangle li.active a::after, .border-as-triangle li.active .a::after { border-left-color: #ddd; } .border-as-triangle li.active a:hover::before, .border-as-triangle li.active .a:hover::before { border-left-color: #003; } .border-as-triangle li a:hover::before { border-left-color: #336; } .border-as-triangle li a:hover::after { border-left-color: #ddd; } .border-as-triangle li a::before, .border-as-triangle li a::after, .border-as-triangle li .a::before, .border-as-triangle li .a::after { content: ''; display: block; width: 0; height: 0; border-top: 41px solid transparent; border-bottom: 41px solid transparent; position: absolute; top: 50%; margin-top: -41px; left: 100%; } .border-as-triangle li a::before, .border-as-triangle li .a::before { border-left: 30px solid #ddd; z-index: 2; } .border-as-triangle li a::after, .border-as-triangle li .a::after { border-left: 30px solid #336; margin-left: 1px; z-index: 1; } |
三角形をtransformで生成
この方法では::beforeは使用せず、::afterのみで実装した要素をtransformで変形させて三角形にします。
リンク可能なエリアは、見た目と同じです。斜めのラインでリンクが変化します。
HTMLはulのclassが異なるだけで、同じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<ul class="after-as-rhombus"> <li> <a href="#1">Link</a> </li> <li> <a href="#2">Link</a> </li> <li class="active"> <span class="a">Active</span> </li> <li> <a href="#4">Link</a> </li> <li> <span class="a">No link</span> </li> </ul> |
三角形にするには、transformのskewで要素を傾斜変形させて菱形にし、rotateで回転させます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.after-as-rhombus li.active a::after, .after-as-rhombus li.active .a::after { border-color: #ddd; } .after-as-rhombus li:nth-of-type(1) { z-index: 4; } .after-as-rhombus li:nth-of-type(2) { z-index: 3; } .after-as-rhombus li:nth-of-type(3) { z-index: 2; } .after-as-rhombus li:nth-of-type(4) { z-index: 1; } .after-as-rhombus a:hover::after { border-color: #ddd; } .after-as-rhombus a::after, .after-as-rhombus .a::after { content: ''; display: block; height: 95px; width: 95px; -webkit-transform: rotate(45deg) skew(10deg, 10deg); transform: rotate(45deg) skew(10deg, 10deg); position: absolute; top: -7px; z-index: -1; right: -21px; z-index: -1; background: inherit; border: 1px #336 solid; } |
三角形をclip-pathで生成
最後の方法は、clip-path: polygon()を使用して三角形を作成します。
この実装の利点は三角形に限らず、他の形にすることもできることです。
リンク可能なエリアは、見た目と同じです。
clip-path: polygon()は、IEはサポート外です。
HTMLはulのclassが異なるだけで、同じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<ul class="clip-path-polygon"> <li> <a href="#1">Link</a> </li> <li> <a href="#2">Link</a> </li> <li class="active"> <span class="a">Active</span> </li> <li> <a href="#4">Link</a> </li> <li> <span class="a">No link</span> </li> </ul> |
::beforeと::afterで生成した要素をclip-path: polygon()で三角形に切り抜きます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
.clip-path-polygon li.active a::after, .clip-path-polygon li.active .a::after { background: #ddd; } .clip-path-polygon li:nth-of-type(1) { z-index: 4; } .clip-path-polygon li:nth-of-type(2) { z-index: 3; } .clip-path-polygon li:nth-of-type(3) { z-index: 2; } .clip-path-polygon li:nth-of-type(4) { z-index: 1; } .clip-path-polygon a:hover::after { background: #ddd; } .clip-path-polygon a::before, .clip-path-polygon a::after, .clip-path-polygon .a::before, .clip-path-polygon .a::after { content: ''; display: block; height: calc(100% + 2px); width: 120px; position: absolute; top: -1px; right: -120px; -webkit-clip-path: polygon(0 0, 0% 100%, 30px 50%); clip-path: polygon(0 0, 0% 100%, 30px 50%); } .clip-path-polygon a::before, .clip-path-polygon .a::before { right: -119px; background: inherit; z-index: 1; } .clip-path-polygon a::after, .clip-path-polygon .a::after { right: -120px; background: #336; } |
sponsors
