こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Webデザインでよく使われる三角形。
ナビゲーションの矢印や吹き出しの先端、装飾として大活躍します!
今回は、CSSの擬似要素（::before／::after）を使った三角形の作り方を豊富なパターンでご紹介します。
すべてコピペOKなので、ぜひお使いください！
CSSで三角形を作る基本原理
三角形はwidth: 0; height: 0;とし、borderを使って一方向にだけ色をつけることで表現します。擬似要素を使えば、HTMLに余計なタグを増やさず装飾できます。
パターン1：下向きの三角形
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
パターン2：上向きの三角形
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
パターン3：左向きの三角形
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
パターン4：右向きの三角形
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
パターン5：矢印風の三角形
ナビゲーションやリストの先頭に便利！
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
パターン6：回転させた三角形
角度を変えれば、デザインの幅が広がります。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
パターン7：アニメーション付き三角形
動きがあると視線を集めやすくなります！
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
パターン8：吹き出し風の三角形
コメントボックスや説明のデザインに！
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
パターン9：クリックで向きが変わる三角形
JavaScriptを使って、開閉式に使える三角形を作ります。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
まとめ：三角形は小さな万能パーツ！
- ナビゲーションや装飾に活躍
- 画像を使わず軽量でレスポンシブ
- 擬似要素でHTMLがスッキリ
三角形のパターンを知っておくだけで、デザインの引き出しがグッと増えます。CSSだけでここまで表現できるのは魅力ですよね。ぜひ日々の制作に活かしてみてください！
satokotadesignキャンペーン実施中！
