CSS三角形ジェネレーター
clip-pathを使って、向きや頂点の位置を自由に調整しながらCSSの三角形を作成できる無料ツールです。グラデーションにも対応し、旧来のborder方式のコードも出力できます。
1. 向きを選択
2. 頂点の位置（%）を自由に調整
数値を直接編集すると、自由な形の多角形（三角形以外）も作成できます。
頂点1
%
%
頂点2
%
%
頂点3
%
%
3. サイズと色
4. プレビュー
5. 生成されたCSS（clip-path方式）
border方式のコード（上下左右の三角形のみ）
古いブラウザ向けの実装で使われてきた、透明なborderを重ねる方式です。角の三角形やグラデーション、カスタム形状には使えません。
clip-pathとborder方式、どちらを使う？
基本はclip-pathがおすすめ
clip-pathは頂点の位置を指定するだけで、上下左右はもちろん、角の三角形や斜めの多角形まで自由に作成できます。背景にグラデーションや画像を使うこともでき、コードの見た目も直感的です。
border方式が向いているケース
単純な上下左右の三角形だけで良い場合や、clip-pathが使えない特殊な環境（一部のメールクライアントのCSSなど）向けにコードを用意したい場合に使います。