狼読

 
2020/06/04

[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>

下向き矢印と上向き矢印のサンプル実装例

上向き矢印
下向き矢印

上記のように下向き矢印と上向き矢印を作ることができましたね。

position:relativeとposition:absoluteを使ってbeforeの要素をボタンの右側に移動させて、四角形の辺にborderをつけることで実装しています。下向き矢印と上向き矢印の違いはtopの位置と回転角度が違うだけで作り方はほとんど変わりません。

まとめ

今回は、cssで作る下向き矢印と上向き矢印の作り方をご紹介させていただきました。考え方は四角形を回転させるだけといったものですが、こういった四角形を回転させれば矢印になるなという柔軟な思考が大切ですね。アコーディオンなどにも応用できます。

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

投稿カレンダー

2024年10月
 123456
78910111213
14151617181920
21222324252627
28293031  

Technology

category

©狼読