AZ Tools

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 — 透明な辺が打ち消し合い、色を塗った三角形だけが残ります。

使い方

  1. 方向（▲▼◀▶ または 4 つのコーナー）を選択。
  2. サイズと色を設定。
  3. 必要なら clip-path モードでよりシンプルに。
  4. 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 年は全環境安全。

関連ツール

色覚シミュレーター

8 種類の色覚異常（CVD）で画像がどう見えるかを再現。

カラー00

CSS Box Shadow ジェネレーター

複数レイヤーで CSS box-shadow を視覚的にデザイン — リアルタイムプレビュー + CSS / Tailwind 出力。

カラー00

カラーフォーマット変換

任意の色を HEX・RGB・HSL・HSV・OKLCH・CSS 変数で一括変換。

カラー00

CSS グラデーションジェネレーター

線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。

カラー00

カラーパレット ジェネレーター

基準色から 6 種類のスキームで調和の取れたパレットを作成。

カラー00

カラーコントラスト チェッカー

文字／背景のコントラストを WCAG AA・AAA 基準でチェック。

カラー00