CSS 三角形ジェネレーター
古典 CSS 三角形トリック：サイズ 0 の要素に太い色 border を付けると、色を塗った辺の反対方向を指す三角形に。本ツールは 8 方向（上下左右 + 4 つの直角コーナー三角）、サイズスライダー、色ピッカーを提供。「clip-path」トグルで現代的代替 — 同形、border 不要、width/height でサイズ調整しやすい。
—
プレビュー
CSS
.triangle {
width: 0;
height: 0;
border-bottom: 80px solid #5b8def;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}border ベースの三角形はサイズ 0 要素に太い色 border — 透明な辺が打ち消し合い、色を塗った三角形だけが残ります。
使い方
- 方向（▲▼◀▶ または 4 つのコーナー）を選択。
- サイズと色を設定。
- 必要なら clip-path モードでよりシンプルに。
- CSS をプロジェクトにコピー。
よくある質問
- なぜ border トリックが効くの？
- 幅 0 要素に太い border を入れると、1 点で交わる 4 つの三角形として描画されます。3 つを透明、1 つだけ色 → 色塗り三角だけが見える。
- border vs clip-path？
- border は古く（IE6 動作）アンチエイリアスの微差あり。clip-path は綺麗で背景や画像との組合せ容易 — 新規コードはこちらを。
- 回転は？
- 非標準角は clip-path モードで polygon 点を調整。同梱の 8 方向で矢印・ツールチップ・パンくず等の大半をカバー。
- ブラウザ対応？
- border 三角はどこでも。clip-path は 2016 年以降の全ブラウザ — 2026 年は全環境安全。
関連ツール
Border Radius ジェネレーター
コーナーを個別ドラッグ、楕円半径、CSS コピー — チャットバブル・ピル・ブロブ・タブのプリセット付き。
カラー 0 0
CSS clip-path ビルダー (円、楕円、多角形、Inset)
CSS `clip-path` プロパティのビジュアルビルダー — 形状を選択 (円、楕円、inset、多角形)、スライダーで数値調整、プレビュークリックで多角形の点を追加、貼り付け可能な CSS 宣言をコピー。10 種の形状プリセット (三角形、六角形、星、矢印、吹き出し、十字など) を内蔵。
カラー 0 0
CSS グラデーションジェネレーター
線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。
カラー 0 0
CSS Box Shadow ジェネレーター
複数レイヤーで CSS box-shadow を視覚的にデザイン — リアルタイムプレビュー + CSS / Tailwind 出力。
カラー 0 0
CSS フィルタープレイグラウンド
blur・brightness・contrast・hue・sepia・invert など 9 種を視覚的に組み合わせ — CSS や Tailwind 任意値でコピー。
カラー 0 0
CSS Cubic-Bezier カーブジェネレーター
コントロールポイントをドラッグして CSS イージング曲線を設計 — 動きをライブプレビュー、cubic-bezier() 値をコピー。
カラー 0 0