裏紙に書く程度の内容

画像を使わずにHTMLとCSSだけで矢印を書く方法

スタイルシートで矢印を書く方法。

表示するhtml

以下のようなhtml上に矢印を表示することにします。

<div class="arrow"></div>

divにしましたがcssでinline-blockを指定するので任意のタグで。

棒の部分

まずは棒の部分を設定します。 ここは素直にwidth,heightを指定します。

.arrow {
    display: inline-block;
    height: 40px;
    width: 80px;
    background-color: red;

}

arrow-1

特に説明も要らないでしょう。

三角を描画

cssで三角形を描画する方法はいくつかありますが、ここではborderを使った方法を使うことにします。

borderを回転させてるわけでもないのになぜ三角形になるか知りたい方は、下記がわかりやすかったのでご参考に。

http://liginc.co.jp/web/html-css/html/164641

一個のタグで実現したいので、擬似要素をつかって三角を描画します。

arrow:before {
    content: "";
    width: 0;
    height: 0;
    border: 60px solid transparent;
    border-left: 60px solid red;
}

arrow-2

とりあえず三角ができました。

三角の位置を調整

最後に位置を調整します。

.arrow {
    display:inline-block;
    height:40px;
    width:80px;
    background-color:red;
    position:relative     /* 追記 */
}

.arrow:before {
    position:absolute;    /* 追記 */
    content:"";
    width:0;
    height:0;
    border:60px solid transparent;
    border-left:60px solid red;

    /* 追記 */
    left:80px;
    top:-40px
}

arrow-3

それっぽくなったYO!

サイズ調整について

矢印の大きさを変えるには、.arrow

  • height
  • width

と、.arrow:before

  • border
  • border-left
  • left
  • top

を任意の値に調整してみてください。(”px”で値指定してるところすべて)

また、矢印の向きを変えたい場合は.arrow:beforeborder-leftを変更し、”px”指定部をかえて位置調整すればできるはずです。

ちなみにLessが使えれば

@arrow-width: 10px;
@arrow-height: 4px;
.arrow {
    // 棒の部分
    height: @arrow-height;
    width: @arrow-width;
    background-color: red;
    position: relative;

    // 三角
    &:before {
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        border: @arrow-height * 2 solid transparent;
        border-left: @arrow-height * 2 solid red;

        left: @arrow-width;
        top: @arrow-height * -1 - @arrow-height / 2;

    }
}

こんな感じで上2行をいじるだけで簡単にサイズ感を確認できます。ご参考になれば。

Index