見出しタグの頭やフロー図などを書き込む際の矢印など、絶妙な使い勝手の良さがある三角形。当サイトでもフロー図の矢印がわりに三角形を使うことにしたので、サイトの表示速度のことも考えて画像を使わずにCSSで表示させてみました。
画像で表示させてしまえば楽なのですが、そうすると画像の数だけhttpリクエストが増加してしまうため、サイトの表示速度に悪影響を与えてしまいます。便利とはいえ、三角形のせいでサイトが必要以上に遅くなるのはイヤです。
というわけでCSSあたりでどうにかできるだろうと調べてみたところ、やっぱりできました。また、CSSで作っておいたほうが色やサイズの調整も簡単です。
目次
三角形が表示される理屈
プロパティはborderを使用します。borderというと通常は
こんな風に文字に下線を引いたり
こんな風に文字を囲ったりするのに使うことが多いかと思います。
このborderを図太くして、上下左右の色をそれぞれ変えると下記のようになります。
border
さらに中の文字を消してwidth（幅）を0にするとこうなります。
4つの三角形が合わさった図形になりました。あとは使用する三角形以外のborderを透明にすれば残った三角形のみが表示されるというワケです。
ソースコードは下記（次の項で書いていますが、このコードでそのまま三角形を表示するのはおすすめしません。三角形を表示する仕組みを説明するためのものです。）
CSSに
1 2 3 4 5 6 7 | div.triangle {width:0;border-top:50px solid transparent;border-right:50px solid transparent;border-bottom:50px solid FFD700;border-left:50px solid transparent;} |
三角形を表示したい場所に
1 | <div class="triangle "></div> |
三角形の向きを変えたい場合はCSSで表示するborderの場所を変えます。
1 2 3 4 5 6 7 | div.triangle {width:0;border-top:50px solid #ADFF2F;border-right:50px solid #FF0000;border-bottom:50px solid #FFD700;border-left:50px solid #0000FF;} |
空タグの問題
上までの流れで三角形はできたので、最初はそのまま使おうと思ったのですが何か違和感が。
そう、これだけだと三角形を表示させようとするdivタグなりspanタグなりが空になってしまいます。表示上は問題ありませんが、本来の使用方法と違う使い方となってしまうのは気持ち悪いです。
「手段は問題ではないッ！三角形を表示したという結果があればいい！」という場合はそれでもいいのですが、なんとかできないものか調べてみたところ、:before、:after擬似要素を使うことで解決出来ました。
擬似要素とは
擬似要素は「文頭の1文字だけ大きくする」、「1行目の文章だけ赤色にする」など、対象の要素の特定の部分にのみスタイルを適用したり、要素の前後に文字や画像を追加することができるCSSの記述です。
:beforeは対象の要素の前に指定した内容を追加することができ、:afterは対象の要素の後ろに指定した内容を追加することができる擬似要素です。
※ただし、IE6、IE7では:beforeや:afterはサポートされていません。
三角形を表示するコード
前述の擬似要素を使って、前または後ろに三角形を表示させたい場所にクラスを指定し、擬似要素で三角形を表示させます。
私の場合は
フロー図
↓
説明文
↓
三角形
↓
フロー図
という形で表示したかったので、画像にクラスを指定し、下記のCSSを適用しました。場合によって画像の上と下、どちらにも適用できるようにしてあります。
CSSに
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | .triangle1:before {display: block;position: relative;width: 0;height: 20px;margin-top: 20px;border: 20px solid transparent;border-top-color: #ffff2b;content: "";left: 50%;margin-left: -20px;-webkit-filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.5));filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.5));}.triangle2:after {display: block;position: relative;width: 0;height: 20px;margin-top: 20px;border: 20px solid transparent;border-top-color: #ffff2b;content: "";left: 50%;margin-left: -20px;-webkit-filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.5));filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.5));} |
画像の上に三角形を表示したい場合は画像を
1 2 3 | <div class="triangle1">上に三角形を表示したい画像</div> |
で囲みます。
画像の下に三角形を表示したい場合は画像を
1 2 3 | <div class="triangle2">上に三角形を表示したい画像</div> |
で囲みます。
下記は実際に画像の上に三角形を表示してみた例です。
今後気が変わればサイズや色などを変更するかもしれませんが、その場合もCSSを書き直すだけでできるのでかなり便利です。
