CSS三角形ジェネレーターとは？
CSS三角形ジェネレーターとは、画像を使わずにCSSのborderプロパティだけで三角形を作るコードを自動生成するツールです。向き・サイズ・色を選ぶだけで、プレビューを確認しながらコピペで使えるCSSが手に入ります。吹き出しのしっぽや矢印、装飾パーツの作成に便利です。
CSS三角形ジェネレーターの使い方
- 向きを選ぶ上下左右の4方向と、四隅（左上・右上・左下・右下）の直角三角形から選べます。
- サイズと色を調整する幅・高さをpxで指定し、色をカラーピッカーで選びます。「正三角形にする」をオンにすると高さが自動計算されます。
- コードをコピーするプレビューを確認して、生成されたCSSをコピーします。HTML側には
<div class="triangle"></div>のような空要素を1つ用意してください。
borderで三角形ができる仕組み
幅・高さが0の要素に太いborderを設定すると、各辺のborderが斜めに接する形で描画されます。このとき1辺だけに色を付け、隣接する辺をtransparent（透明）にすると、色の付いた部分が三角形として見える、という仕組みです。画像が不要なため表示が速く、色やサイズの変更もCSSだけで完結します。
こんな場面で使えます
吹き出しのしっぽ
チャットUIや注釈の吹き出しの下に付ける三角形を、疑似要素（::after）と組み合わせて作れます。
矢印・ナビゲーション
「次へ」ボタンの矢印や、アコーディオンの開閉アイコンに使えます。
セクションの装飾
セクションの区切りに大きな三角形を配置するデザインにも応用できます。
よくある質問
生成したCSSはそのまま使えますか？
はい、CSSがリセットされている前提で動作します。お使いのCSSフレームワークによってはborder関連のスタイルが競合することがあるので、表示が崩れる場合は検証ツールでプロパティの競合をご確認ください。
clip-pathとどちらを使うべきですか？
border方式は古いブラウザまで広く対応しているのが利点です。より複雑な多角形を作りたい場合はclip-path: polygon()が向いていますが、シンプルな三角形ならborder方式で十分です。
ホバーで色を変えられますか？
はい、:hover時にborder-colorの該当方向の色を変えるだけで変更できます。transitionを併用すればなめらかに変化させることもできます。