triangle

CSS 三角形 ジェネレーター

要素の枠線を使った定番テクニックで、画像なしの三角形をCSSだけで作成。正三角形は高さを自動計算、二等辺は底辺と高さを自由に設定。吹き出しの矢印などに便利です。

使い方:種類(正三角形/二等辺)と向き・色を選ぶと、CSSだけで三角形が作れます。

仕組み・詳しく
要素の枠線(border)を利用した定番テクニック。幅・高さを0にし、3辺を透明・1辺だけ色にすると三角形に。正三角形は高さ=底辺×0.866で自動計算、二等辺は底辺と高さを自由に設定できます。吹き出しの矢印などに便利。

設定

種類
向き
色

プレビュー

—
広告