border -> clip-pathで三角アイコン作成
CSSで三角のアイコンを作成する際はborderがよく使用される。
しかし、borderは本来はその名の通り枠線のためのCSSプロパティなので三角アイコンを作成するのに適さない。
borderを使用したコードは以下のようになり、アイコンのサイズや指定するプロパティがわかりづらい。
/* <i class="triangle"></i>Sample */
.triangle {
display: inline-block;
position: relative;
top: -1px;
margin-right: 5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 8px solid #c00;
}
clip-pathだとwidth, height, backgroundとclip-path: polygon(0 0, 0 100%, 100% 50%);を記述すれば良いのでborderより指定した結果がわかりやすい。
/* <i class="arrow"></i>Sample */
.arrow {
display: inline-block;
position: relative;
top: -1px;
width: 8px;
height: 10px;
margin-right: 5px;
clip-path: polygon(0 0, 0 100%, 100% 50%);
background: #c00;
vertical-align: middle;
}
リスト(liタグ)で使用する場合は以下のようになる。
.arrowList > li::before {
content: "";
display: inline-block;
position: relative;
top: -1px;
width: 8px;
height: 10px;
margin-right: 5px;
clip-path: polygon(0 0, 0 100%, 100% 50%);
background: #c00;
vertical-align: middle;
}
- Sample1
- Sample2
- Sample3
CSSのclip-pathプロパティはborderと同様に現在ほとんどのブラウザで使用可能なのでなるべくborderよりもclip-pathを使用したほうが良いだろう。
clip-path - CSS: カスケーディングスタイルシート | MDN
