Sassを使って矢印を描こう – CSSテクニック

数あるCSSのテクニックの一つで、三角形と四角形を組み合わせて矢印を書いてみます。実際に描いているものから見てみましょう。

上記の矢印は画像を一切利用していません。利用しているのはCSSの機能だけです。では、Sassで実装する前にCSSを見てみることにしましょう。この矢印は、太い枠線を”一辺だけ”描画すると三角形を表示することができるというテクニックを利用しています。右方向を向いた三角形に四角形を組み合わせて矢印を作っています。

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

div#content {
    width: 500px;
    height: 400px;
    margin: auto;
    background-color: orange;
}

div#content div.arrow {
	position: relative;
	top: 0px;
	left: 0px;
	background: #292929;
	width: 30px;
	height: 10px;
}

div#content div.arrow:after {
	position: absolute;
	content: "";
	top: -10px;
	left: 100%;
	border: 15px solid #292929;
	border-color: transparent;
	width: 0;
	height: 0;
	border-left-color: #292929;
	border-right-width: 0;
}

この内容を毎度毎度、使用する度に指定するのは骨が折れますね。計算結果のピクセル数もよく意味がわかりません。ということでSass化してみましょう。まずは単純にSassに変更しmixin化したものが以下となります。計算方法も変数を使うことで分かりやすくなっていますので、上記のCSSソースで把握できなかった方は、以下のソースを見ると分かりやすいかと思います。

// 矢印を書く
@mixin arrow() {
    
    // 矢印の大きさ
    $length:      30px;
    $width:       10px;
    $arrow_width: 15px;

    div.arrow {
        position:    relative;
        top:         90px;
        left:        80px;
        background:  #292929;
        
        width:       $length;
        height:      $width;

        &:after {
            position:            absolute;
            content:             "";
            
            top:     - $arrow_width + $width / 2;
            left:    100%;

            // 三角形を描くテクニック(透明の枠を描く)
            border:              $arrow_width solid #292929;
            border-color:        transparent;
            width:               0;
            height:              0;
            
            // 三角形を描くテクニック(一辺に色をつけると三角形になる)
            border-left-color:   #292929;
            border-right-width:  0;
        }
    }
}

次に汎用性を持たせていきます。場所を指定すると親のボックスから相対的な位置に表示するようにしてみます。指定するのはx方向の値と、y方向の値です。指定した位置に矢印の先端を持ってきます。

// 矢印を書く
@mixin arrow(
    $start_x: 0px,
    $start_y: 0px) {
    
    // 矢印の大きさ
    $length:      30px;
    $width:       10px;
    $arrow_width: 15px;

    div.arrow {
        position:    relative;
        top:         $start_x;
        left:        $start_y;
        background:  #292929;
        
        width:       $length;
        height:      $width;

        &:after {
            position:            absolute;
            content:             "";
            
            top:     - $arrow_width + $width / 2;
            left:    100%;

            // 三角形を描くテクニック(透明の枠を描く)
            border:              $arrow_width solid #292929;
            border-color:        transparent;
            width:               0;
            height:              0;
            
            // 三角形を描くテクニック(一辺に色をつけると三角形になる)
            border-left-color:   #292929;
            border-right-width:  0;
        }
    }
}

この拡張だけで、自由な位置に矢印を記述できるようになりました。では次に、矢印の大きさも変更できるようにしたいと思います。矢印の大きさは細かく指定できるようにも拡張できますが、今回は簡単に今のサイズを基点として倍率を指定できるようにします。

// 矢印を書く
@mixin arrow(
    $start_x: 0px,
    $start_y: 0px,
    $size:    1.0) {
    
    // 矢印の大きさ
    $length:      30px * $size;
    $width:       10px * $size;
    $arrow_width: 15px * $size;

    div.arrow {
        position:    relative;
        top:         $start_x;
        left:        $start_y;
        background:  #292929;
        
        width:       $length;
        height:      $width;

        &:after {
            position:            absolute;
            content:             "";
            
            top:     - $arrow_width + $width / 2;
            left:    100%;

            // 三角形を描くテクニック(透明の枠を描く)
            border:              $arrow_width solid #292929;
            border-color:        transparent;
            width:               0;
            height:              0;
            
            // 三角形を描くテクニック(一辺に色をつけると三角形になる)
            border-left-color:   #292929;
            border-right-width:  0;
        }
    }
}

最後に色も変更できるように指定してみましょう。以下が変更後のソースとなります。

// 矢印を書く
@mixin arrow(
    $start_x: 0px,
    $start_y: 0px,
    $size:    1.0,
    $color: #292929) {
    
    // 矢印の大きさ
    $length:      30px * $size;
    $width:       10px * $size;
    $arrow_width: 15px * $size;

    div.arrow {
        position:    relative;
        top:         $start_x;
        left:        $start_y;
        background:  $color;
        
        width:       $length;
        height:      $width;

        &:after {
            position:            absolute;
            content:             "";
            
            top:     - $arrow_width + $width / 2;
            left:    100%;

            // 三角形を描くテクニック(透明の枠を描く)
            border:              $arrow_width solid $color;
            border-color:        transparent;
            width:               0;
            height:              0;
            
            // 三角形を描くテクニック(一辺に色をつけると三角形になる)
            border-left-color:   $color;
            border-right-width:  0;
        }
    }
}

このように、CSSのテクニックをmixin化してみた後にいろいろ拡張してみると、自分専用の便利なライブラリが出来上がっていきます。実験してみてください！