このツールについて
定番のボーダートリックを使って純粋な CSS の三角形を生成します。方向・サイズ・色を選んでルールをコピーできます。プレビューはリアルタイムに更新され、すべてブラウザー内で動作します。
よくある質問
ボーダートリックはどのように動作しますか？
幅と高さが 0 の要素はボーダーだけが表示されます。3 つのボーダーを透明にすると、残った 1 つの色付きボーダーが三角形の形になります。
なぜ width と height を 0 にするのですか？
ボックスの面積がないとボーダーが中央で交わるため、太い縁ではなく、表示される 1 つのボーダーがきれいな三角形になります。