なにかと使う下向きの矢印

たとえば『○○の流れ』なんてコンテンツ、必要になること多いですよね。
所謂『FLOW』というコンテンツ。
そんなときに使いたいのが下向きの矢印。
で今日は私がよく使っているHTMLとCSSによる下向き矢印の作り方。

こんな感じの矢印を作ります。

HTML

HTMLソースです。空のDIVタグを用意します。

<div class="divArrow"></div>

CSS

div.downArrow {
    clear: both;
    display: block;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border-top: 10px solid #555;
    border-right: 10px solid #555;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    margin-bottom: 30px;
}

作りはいたって簡単、borderをスタイルシートのtransform: rotate(135deg);で斜めにしているだけです。
widhtとheightは矢印の大きさです。
サイズを変える場合、線は45%傾けているのでwidthとheightの値は同じになるようにしてください。
border-topとborder-rightで矢印の太さと色を決定しています。
サンプルの太さは10pxです。色は濃い目のグレー(#555)です。

何かと便利な下向き矢印についてでした。

では。