[css]下向き矢印と上向き矢印の作り方

今まで矢印はどうされていましたか？画像で作られていましたか？

実はcssで作成することができます。作り方は非常にシンプルで四角形を回転させるだけといったものになります。

今回は、下向き矢印と上向き矢印の作り方をご紹介したいと思います。
ホームページでボタンなどの文字の隣にあったり、アコーディオンが展開するときに下矢印だったものが上矢印になったり、使い方は様々なところで使われています。

HTMLとCSSで下向き矢印と上向き矢印を作ってみよう

HTMLとCSSを使って下向き矢印と上向き矢印を作って見ましょう。

考え方は、四角形を作って右と下の辺にborderを引きます。
その状態で回転させればどうでしょう？矢印に見えるようなものができると思いませんか？

単純に矢印だけを作ってもあまり為にならないかと思いますので、ボタンの右側に上向き矢印と下向き矢印をつけてみようと思います。beforeの要素を上手に使うことで作ることができます。サンプルコードは次のようになります。

<style>
.sample_button{
 background:#eee;
 border:1px solid #ccc;
 text-align:center;
 padding-top:0.5em;
 padding-bottom:0.5em;
 padding-left:1em;
 padding-right:1em;
 margin-bottom:30px;
 display:block;
}
.upper_arrow,
.bottom_arrow{
  position:relative;
}
.upper_arrow:before{
 content:"";
 display:inline-block;
 width:20px;
 height:20px;
 border-right:1px solid #aaa;
 border-bottom:1px solid #aaa;
 transform:rotateZ(-135deg);
 position:absolute;
 right:20px;
 top:15px;
}
.bottom_arrow:before{
 content:"";
 display:inline-block;
 width:20px;
 height:20px;
 border-right:1px solid #aaa;
 border-bottom:1px solid #aaa;
 transform:rotateZ(45deg);
 position:absolute;
 right:20px;
 top:5px;
}
</style>
<div class="upper_arrow sample_button">上向き矢印</div>
<div class="bottom_arrow sample_button">下向き矢印</div>