CSS３では、画像やJavaScriptを使わなくてもCSSだけでさまざまな表現をすることが可能になりました。
今回は、CSSのみで矢印を作る方法について紹介します。
矢印の作り方
|
1 |
<div class="arrow"></div> |
まず、HTMLにclass名「arrow」の空のdiv要素を記述します。
|
1 2 3 4 5 6 |
.arrow{ display: inline-block; height: 30px; width: 50px; background-color: blue; } |
次にCSSに矢印の棒の部分を記述します。「height」や「width」、「background-color」の部分は好きな大きさや色に設定してください。
|
1 2 3 4 5 6 7 |
.arrow:before { content: ""; width: 0; height: 0; border: 30px solid transparent; border-left: 30px solid blue; } |
これは、「border」と「border-left」の境界線が斜めになることを利用し、余計な部分を透明にすることで三角形を作っています。
ここでは必ず「width」と「height」の大きさは「0」に設定してください。「border」や「border-left」の大きさは好きな大きさに設定しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.arrow{ display: inline-block; height: 30px; width: 50px; background-color: blue; position: relative; /*追加*/ } .arrow:before { content: ""; width: 0; height: 0; border: 30px solid transparent; border-left: 30px solid blue; position:absolute; left:50px; top:-15px; } |
三角の位置を調整することで、矢印の形になりました。
「left」は.arrowの「width」と同じ大きさに。「top」は「border」で指定したpxの半分の大きさでマイナスで指定するとちょうどよい位置に調整できます。
大きさや位置を調整することで、テキストリンクの前などにアイコン代わりに設置することもできます。
