CSSのみで三角形を作るには

2016年9月25日カテゴリー : CSS コメント : 0

　WordPress のサイドバーでドロップダウンの CSS のカスタマイズに三角形が必要になったので調べてみました。画像を使っても実現できますが、色やサイズを簡単に調整できたり、アニメーションができたりとメリットが多いです。画像より容量も縮小できますしね。使うのは border プロパティです。

サンプル

div タグを使っていますが、p や span なども使用できます。CSS は最後に指定された設定が反映されるので、border-top は必ず最後に指定するようにしてください。

<div class="triangle"></div>

.triangle {
    width: 0;
    height: 0;
    border: 30px solid transparent;
    border-top: 30px solid #f69;
}

.triangle {

width: 0;

height: 0;

border: 30px solid transparent;

border-top: 30px solid #f69;

}

このようになります。

20160925_1

ポイント

どのように三角形を実現しているのかを理解するには、次のようにしてみればわかりやすいです。

.triangle {
    width: 0;
    height: 0;
    border-top: 30px solid #f69;
    border-right: 30px solid #00FF00;
    border-bottom: 30px solid #FF0000;
    border-left: 30px solid #00FFFF;
}

.triangle {

width: 0;

height: 0;

border-top: 30px solid #f69;

border-right: 30px solid #00FF00;

border-bottom: 30px solid #FF0000;

border-left: 30px solid #00FFFF;

}

width と height をゼロに設定し、border を solid に指定すると四角形を作成できます。

20160925_2

ここから残したいもの以外を transparent によって透明にしてあげれば三角形が完成するというわけです。試しにひとつひとつ透明にしてみてください。

.triangle {
    width: 0;
    height: 0;
    border-top: 30px solid #f69;
    border-right: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid transparent;
}

.triangle {

width: 0;

height: 0;

border-top: 30px solid #f69;

border-right: 30px solid transparent;

border-bottom: 30px solid transparent;

border-left: 30px solid transparent;

}

これをもうちょっと洗練して記述すると最初に紹介した CSS となります。

三角形の底辺と高さの変更

三角形の高さを変更したい場合には、残した部分のピクセル数を増減します。例えば、先ほどのサンプルでやってみます。30px のときと比較してみてください。

border-top を 10px にした場合

20160925_3

border-top を 50px にした場合

20160925_4

三角形の底辺の大きさを変更したい場合には border のピクセル数を増減してください。

border を 30px にした場合（最初のサンプル

20160925_5

border を 100px にした場合

20160925_6

高さは変わらずに底辺の大きさだけが変わっているのがわかります。

応用

　個人的にリストマーカーはアイコンフォントで作成するのが好きなのですが、シンプルで構わない・リストマーカーのためだけにアイコンフォントを用意したくないという人には、三角形を使ってマーカーを実現してもよいかと思います。

<ul>
    <li>フォー</li>
    <li>バインチュン</li>
    <li>バインバオ</li>
    <li>チャーカーラボン</li>
    <li>バインザン</li>
</ul>

<ul>

<li>バインチュン</li>

<li>バインバオ</li>

<li>チャーカーラボン</li>

<li>バインザン</li>

</ul>

次のように CSS を設定します。

li {
    position: relative;
}

li::before {
    content: '';
    position: absolute;
    top: 5px;
    left: -15px;
    
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left: 6px solid #f69;
}

li {

position: relative;

}

li::before {

content: '';

position: absolute;

top: 5px;

left: -15px;

width: 0;

height: 0;

border: 5px solid transparent;

border-left: 6px solid #f69;

}

　今度は左側の三角形を利用します。疑似要素である before の content を空にして、position プロパティで位置を決定しています。親要素(？)にあたる li に relative を設定し忘れると、before の absolute がちゃんと機能しなくなるので忘れないようにしてください。

20160925_7