以前なら三角形は画像一択でしたが、
単純な三角はCSSで表現が可能です。
三角形のジェネレーターも存在しますが、
今回はコピペでサクッと使えるような、頻出する三角形のコードを紹介します。
1.塗りつぶしの三角形
まずは、塗りつぶしの三角形を紹介します。
矢印や吹き出しにはもちろん、見出しのポイントにもなる
汎用性の高い三角形です。
HTML
1 |
<div class="triangle"></div> |
CSS
1 2 3 4 5 6 7 |
.triangle{ width: 0; height: 0; border: 30px solid transparent; border-top: 40px solid #00b992; } |
プレビュー
プレビューでは、border-top
のみ色を指定しているため下向きの三角になっていますが、
下の図を参考にすると、色々な向きの三角が作れます。
この方法は、border
の両端が斜めの形状になっていることを利用しています。
要素の幅・高さがないとき、border
は上の図のように三角形になるのです。
大きさや高さなど、数字を変えていろいろ試してみてください!
2.V字型の三角形
次に、アコーディオンやボタンでよく見るV字型の三角形を紹介します。
今回は、アコーディオンでの使用を想定して
ボタンをクリックすると三角形が回転します。
三角形は擬似要素で配置します。
HTML
1 2 |
<button class="rotate_triangle" type="button">MENU</button> |
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 |
.rotate_triangle{ width: 100%; background: #060533; color: #f0f0f0; padding: 10px; border-radius: 3px; box-shadow: 0 2px 0 #00b992; position: relative; } .rotate_triangle::after { content: ''; width: 20px; height: 20px; border-left: 2px solid #00b992; border-bottom: 2px solid #00b992; transform: rotate(-45deg); transform-origin: 25% 65%; transition: all .5s; position: absolute; top: 0; bottom: 5px; right: 15px; margin: auto; } .rotate_triangle.clicked::after { transform: rotate(135deg); } |
三角形をposition
で配置したいので、.rotate_triangle
に必ずposition: relative;
を指定しておいてください。
クリックするごとに、任意のクラス名(ここでは.clicked
)をつけ外しするので、
回転後の角度も指定しておきます。
jQuery
1 2 3 4 5 6 |
$(function() { $('.rotate_triangle').on('click',function (){ $(this).toggleClass('clicked'); }); }); |
jQueryでは、toggleClass
でクラスのつけ外しをしています。
プレビュー
上の「MENU」をクリックしてみて下さい。三角形が回転します。
V字型の三角形は、いたってシンプルなつくりで、
上の図のように、四角形の2辺にborder
を指定し、transform
で回転させています。.rotate_triangle::after
にあらかじめtransition
を指定しておき、.clicked
が付与されたときの角度を別に指定しているので、回転しているような動きになります。
transition
について詳しくは、また別の機会に紹介します。
まとめ
今回は、CSSで三角形をつくる方法を、コピペですぐ使えるように紹介しました。
方法1はdiv
で、方法2は擬似要素で作りましたが、どちらもどっちでもいけます。
お試しあれ〜。
コメント