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

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

サンプル

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

このようになります。

20160925_1

ポイント

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

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

20160925_2

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

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

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

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

border-top を 10px にした場合

20160925_3

border-top を 50px にした場合

20160925_4

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

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

20160925_5

border を 100px にした場合

20160925_6

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

応用

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

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

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

20160925_7

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP