ライブビジュアルエディタで純粋なCSS三角形、矢印、方向インジケーターを生成。12のプリセット方向から選択し、サイズと色をカスタマイズし、本番環境でそのまま使用できるCSSを即座にコピー。画像は不要 — 100%クライアントサイド。
CSS三角形ジェネレーターは、ボーダーテクニックを使用して純粋なCSS三角形と矢印を作成します — 画像、SVG、外部依存関係は不要です。CSS三角形は、3つのボーダーを透明に設定し、1つを単色にすることで、三角形の錯覚を作り出します。このテクニックはCSSの初期からWeb開発の定番であり、方向インジケーター、ツールチップ、ドロップダウン矢印、装飾要素をウェブページに追加する最も軽量な方法として今も使われています。すべての処理はブラウザ内で行われます — データはどこにも送信されません。
CSS三角形はボーダーを使用して作成されます。要素の幅と高さをゼロにして厚いボーダーを設定すると、ボーダーは45度の角度で交わります。3つのボーダーを透明にし、1つを単色にすることで、単色のボーダーの方向を指す三角形が得られます。これは外部リソースが不要な古典的なCSSテクニックです。
もちろんです。CSS三角形はすべての最新ブラウザでサポートされており、10年以上前からそうです。ドロップダウン矢印、ツールチップポインター、吹き出しの尾、ステップインジケーター、装飾要素として主要なウェブサイトで一般的に使用されています。
三角形プリセットは、幅と高さがゼロの純粋な三角形を作成します。矢印プリセットは三角形に長方形のベースを追加し、ナビゲーションインジケーター、トップへ戻るボタン、方向ポインターに役立つ矢印形状を作成します。
CSSでの真の正三角形は、可視の三角形が実際にはボーダー角が形成する45度の二等辺直角三角形であるため、特定のボーダー幅比率が必要です。正三角形に近づけるには、高さが底辺の幅の約86.6%（√3/2比率）である必要があり、このツールは自動的に計算します。