コピペでOK!画像を使わずCSSで三角形をつくる方法×2

スポンサーリンク

※本サイトにはプロモーションが含まれています

CSS

以前なら三角形は画像一択でしたが、
単純な三角はCSSで表現が可能です。
三角形のジェネレーターも存在しますが、
今回はコピペでサクッと使えるような、頻出する三角形のコードを紹介します。

1.塗りつぶしの三角形

まずは、塗りつぶしの三角形を紹介します。
矢印や吹き出しにはもちろん、見出しのポイントにもなる
汎用性の高い三角形です。

HTML

CSS

プレビュー

 

プレビューでは、border-topのみ色を指定しているため下向きの三角になっていますが、
下の図を参考にすると、色々な向きの三角が作れます。

この方法は、borderの両端が斜めの形状になっていることを利用しています。
要素の幅・高さがないとき、borderは上の図のように三角形になるのです。
大きさや高さなど、数字を変えていろいろ試してみてください!

2.V字型の三角形

次に、アコーディオンやボタンでよく見るV字型の三角形を紹介します。
今回は、アコーディオンでの使用を想定して
ボタンをクリックすると三角形が回転します。
三角形は擬似要素で配置します。

HTML

CSS

三角形をpositionで配置したいので、
.rotate_triangleに必ずposition: relative;を指定しておいてください。
クリックするごとに、任意のクラス名(ここでは.clicked)をつけ外しするので、
回転後の角度も指定しておきます。

jQuery

jQueryでは、toggleClassでクラスのつけ外しをしています。

プレビュー

上の「MENU」をクリックしてみて下さい。三角形が回転します。

V字型の三角形は、いたってシンプルなつくりで、

上の図のように、四角形の2辺にborderを指定し、transformで回転させています。
.rotate_triangle::afterにあらかじめtransitionを指定しておき、
.clickedが付与されたときの角度を別に指定しているので、回転しているような動きになります。

transitionについて詳しくは、また別の機会に紹介します。

まとめ

今回は、CSSで三角形をつくる方法を、コピペですぐ使えるように紹介しました。
方法1はdivで、方法2は擬似要素で作りましたが、どちらもどっちでもいけます。
お試しあれ〜。

コメント

タイトルとURLをコピーしました