CSS三角形ジェネレーター - Border Trickで CSS三角形を作成 オンライン
Border trickとclip-path polygonでCSS三角形をライブプレビュー付きで生成。8方向、3種類の三角形、複数の出力形式 — 100%クライアントサイド処理。
よくある質問
CSS三角形とは何ですか？どのように動作しますか？
CSS三角形は、画像やSVGなしに純粋なCSSで作成された三角形の図形です。最も一般的な技法は「ボーダートリック」です：要素の幅と高さが0の場合、ボーダーは対角線の継ぎ目で出会います。4つのボーダーのうち3つを透明にし、1つに色を付けると、可視のボーダーが三角形を形成します。
このCSS三角形ジェネレーターの使い方は？
1. 方向パッドで三角形の方向を選択します。2. 三角形の種類を選びます：正三角形、二等辺三角形、不等辺三角形。3. スライダーや数値入力で幅と高さを調整します。4. カラーピッカーで色を選びます。5. プレビューでリアルタイムに更新を確認します。6. ワンクリックでCSSコードをコピーします。
データは安全ですか？サーバーに送信されますか？
はい、データは完全に安全です。このツールはクライアントサイドのJavaScriptを使用してブラウザ内で完全に動作します。データはサーバーに送信されません。
ボーダートリックとclip-pathの違いは？
ボーダートリックはゼロ幅/高さの要素を作成し、ボーダーの幅と色で三角形を形成します。優れたブラウザサポートがありますが、box-shadowやbackground-imageは適用できません。clip-path方式はclip-path: polygon()で通常の要素を三角形にクリップし、背景、グラデーション、影を使用できます。
CSS三角形はいつ使うべきですか？
CSS三角形は一般的に次の用途に使われます：ツールチップの矢印、ドロップダウンメニューのインジケーター、パンくずリストのセパレーター、アコーディオンのインジケーター、吹き出しの尾、装飾的なセクション区切り。
CSS三角形にbox-shadowを追加できないのはなぜ？
ボーダートリックの三角形はゼロ幅・ゼロ高さの要素です。box-shadowは要素のボックスに適用されますが、面積がありません。影付きの三角形にはclip-path方式またはfilter: drop-shadow()を使用してください。
正三角形、二等辺三角形、不等辺三角形とは？
正三角形は3辺がすべて等しく、すべての角が60度です。高さは幅×√3/2で数学的に決定されます。二等辺三角形は2辺が等しく対称です。不等辺三角形は3辺がすべて異なり、非対称な矢印に使えます。
コード例
// CSS Triangle Generator - JavaScript Implementation
// Generate CSS triangle using the border trick
function generateTriangleCSS(direction, width, height, color) {
const styles = { width: '0', height: '0' };
const halfWidth = width / 2;
const halfHeight = height / 2;
switch (direction) {
case 'up':
styles['border-left'] = `${halfWidth}px solid transparent`;
styles['border-right'] = `${halfWidth}px solid transparent`;
styles['border-bottom'] = `${height}px solid ${color}`;
break;
case 'down':
styles['border-left'] = `${halfWidth}px solid transparent`;
styles['border-right'] = `${halfWidth}px solid transparent`;
styles['border-top'] = `${height}px solid ${color}`;
break;
case 'left':
styles['border-top'] = `${halfHeight}px solid transparent`;
styles['border-bottom'] = `${halfHeight}px solid transparent`;
styles['border-right'] = `${width}px solid ${color}`;
break;
case 'right':
styles['border-top'] = `${halfHeight}px solid transparent`;
styles['border-bottom'] = `${halfHeight}px solid transparent`;
styles['border-left'] = `${width}px solid ${color}`;
break;
}
return Object.entries(styles)
.map(([prop, value]) => `${prop}: ${value};`)
.join('\n');
}
// Generate clip-path polygon
function generateClipPath(direction, width, height, color) {
const points = {
up: '50% 0%, 100% 100%, 0% 100%',
down: '0% 0%, 100% 0%, 50% 100%',
left: '100% 0%, 100% 100%, 0% 50%',
right: '0% 0%, 100% 50%, 0% 100%',
};
return `width: ${width}px;\nheight: ${height}px;\nbackground: ${color};\nclip-path: polygon(${points[direction]});`;
}
console.log(generateTriangleCSS('up', 100, 87, '#3B82F6'));
// width: 0; height: 0;
// border-left: 50px solid transparent;
// border-right: 50px solid transparent;
// border-bottom: 87px solid #3B82F6;