CSS 三角形ジェネレーター

CSSのborderは，要素の四隅で斜めに接します．要素本体のwidthとheightを0にし，border-styleをsolidにすると，上下左右のborderが中央の一点へ集まる形になります．このうち一辺だけに色を付け，隣接する辺をtransparentにすると，色の付いた部分だけが三角形として見えます．

このジェネレーターは.css-triangleへwidth: 0，height: 0，border-style: solidを出力し，選んだ方向に応じてborder-widthとborder-colorの四辺分の値を組み立てます．画像やSVGを生成するのではなく，HTML要素の枠線をブラウザに描画させる方式です．

transparentにしたborderも形を決める領域として存在します．色付きの辺だけを見て幅や高さを変更すると意図しない比率になるため，四辺のborder-widthを一組として扱います．ブラウザの拡大率や描画エンジンによって境界にわずかなにじみが見える場合があり，ベクター画像と完全に同じ表示を保証する方法ではありません．

「上」を選ぶと，border-widthは0，幅の半分，高さ，幅の半分の順です．border-colorは上・右・左をtransparentにし，下borderだけに指定色を使います．色付きの下borderが中央から上向きに尖って見え，左右の透明borderが底辺の横幅を作ります．「下」は反対に，上borderへ高さと色を割り当て，左右へ幅の半分を使います．

「左」では，上と下のborderへ高さの半分，右borderへ幅を割り当てます．右borderだけを色付きにし，左borderは0です．「右」は左borderへ幅と色を割り当て，上と下へ高さの半分を使います．このため，上下方向の入力幅は底辺全体，左右方向の入力高さは底辺全体に対応します．

幅と高さは各10〜300px，初期値はどちらも100pxです．幅が奇数の場合，半分は50.5pxのような小数になり，その値をCSSへそのまま出力します．幅と高さを同じにしても，border方式の形状を数学的な正三角形と呼べるとは限りません．用途に合わせ，プレビューを見ながら縦横比を調整してください．

左上，右上，左下，右下は，入力した幅と高さを隣接する二辺のborderへ割り当てる直角三角形です．左上ではborder-widthを高さ，幅，0，0とし，上borderを色付き，右borderを透明にします．右上は0，幅，高さ，0で右borderを色付き，下を透明にします．

左下は高さ，0，0，幅で左borderを色付き，上を透明にします．右下は0，0，高さ，幅で下borderを色付き，左を透明にします．

画面は3×3配置ですが，中央は方向ではなく空欄です．選択できるのは周囲の8方向だけです．斜め形状では，入力した幅と高さが二つの直交する辺へ使われるため，上下左右の二等辺三角形とは値の読み方が異なります．

色は#3b82f6のような#RRGGBB形式の6桁HEXです．初期値の青に加え，青，赤，緑，オレンジ，紫系，ピンク，濃紺の8色パレットとカラーピッカーがあります．文字入力が未完成または不正な間はエラーを表示し，3種類のコピーボタンを無効にします．#RGB，8桁HEX，rgba()，alpha付き色は受け付けません．

標準CSS欄は，.css-triangleクラスと五つの宣言を出力します．width，height，border-styleに続き，選択方向から計算したborder-widthとborder-colorが入ります．HTML欄は<div class="css-triangle"></div>だけなので，このHTMLと標準CSSを組み合わせて使います．

クラス名が既存CSSと重なる場合は，HTMLとCSSの両方を同じ別名へ変更してください．

Tailwind CSS欄は，w-0，h-0，border-solidと，px値・色を角括弧で表した任意値クラスを一つのdivへ並べます．例えば上向きなら左右borderの幅と透明色，下borderの高さと指定色を含みます．Tailwindの任意値構文や色を含むクラスの抽出方法は，利用中のバージョンやビルド設定で確認が必要です．

すべての環境で設定なしにそのまま使えることを保証する出力ではありません．

標準CSSとTailwind出力は同じ形状を意図していますが，プロジェクト側の既存スタイルやクラス競合により見え方が変わることがあります．コピー後は実際のページで確認し，必要ならdisplay，position，marginなどを追加してください．

プレビューは，計算したborderWidthとborderColorをページ内のdivへインラインスタイルとして適用します．設定を変更すると形状も更新されるため，8方向，縦横比，色をコードへ移す前に確認できます．プレビュー要素には見やすさのためページ側のdrop-shadowクラスがありますが，この影は生成されるCSS，HTML，Tailwindコードには含まれません．

背景は市松模様，白，黒の三つです．画面上の「透過」は，市松模様を使って透明部分の位置を見分けるための表示名であり，画像の透明背景を書き出す機能ではありません．背景設定もコピー対象外です．

CSS，HTML，Tailwindの各欄に個別のコピーボタンがあります．Clipboard APIへの書き込みが成功した後だけ完了状態を表示し，失敗時は表示コードを手動で選ぶよう案内します．色が不正な間は，透明色へ置き換えた確認用出力が見えていてもコピーできません．6桁HEXへ修正してから取得してください．

出力するHTMLは独立したdivだけです．吹き出し本体，親コンテナ，position: relative，三角形側のposition: absolute，top・leftなどの座標，::beforeや::afterのcontentは生成しません．ツールチップやポップオーバーとして使う場合は，コピーしたborder値を対象の疑似要素へ移すなど，配置先に合わせたCSSを追加します．

SCSS，LESS，RGBA，影，アニメーション，SVG，PNGの出力にも対応しません．CSSだけで描くことが常に画像より軽い，読み込みが速い，高密度画面で必ず鮮明といった性能・品質の保証はできません．形状や色の表現方法を，保守性や対象ブラウザも含めて選んでください．

コード生成とプレビュー計算はこのコンポーネントのJavaScriptで行いますが，Webページや必要な資産の初回読込などサイト利用に伴う通信まで存在しないという意味ではありません．完全オフライン，一切の通信がないこと，絶対的な安全性，生成コードの利用条件を判定する機能ではありません．実装するサイトの要件と対象ブラウザで最終確認してください．