CSS 三角形ジェネレーター

生成されるCSSの読み方

生成されるルールは必ず width: 0 と height: 0 から始まり、要素の中身の領域はなく、箱全体がボーダーでできています。上・右・下・左の4方向では3本のボーダーを使い、透明な2本の合計が底辺の長さ、実色の1本の太さが三角形の高さになります。四隅の方向では実色と透明の2本だけを使い、長方形の角から直角三角形を切り出します。コピーしたら .triangle を自分のクラス名に変えて使います。

ブログの会話吹き出し

ブログでよく見る「アイコンの横に吹き出し」の形では、左側の話者の吹き出しに左向きの小さなしっぽを付けます。方向を「左」、幅10、高さ16にして、色に吹き出しの背景色を入れます。ここではデジタル庁のデザイントークン（@digital-go-jp/design-tokens 2.0.1）にある --color-neutral-solid-gray-50 の #f2f2f2 を使いました。

.triangle {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 10px solid #f2f2f2;
}

高さ16は上下8pxずつの透明なボーダーに分かれ、右のボーダー10pxがしっぽの長さになります。実際には div を増やさず、吹き出しの疑似要素にこの宣言を入れて外側へ出します。

.balloon {
  position: relative;
  background: #f2f2f2;
}
.balloon::before {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 10px solid #f2f2f2;
}

left: -10px はしっぽの幅と同じ値です。右側の話者には方向「右」で作り直し、right: -10px に置きます。

メニューの開閉マークと奇数の幅

ナビゲーションの「▼」のような開閉マークを幅15、高さ8で作ると、幅が奇数なので左右の透明なボーダーを7pxと8pxに分けます。合計は15pxのままですが、先端は中央より0.5px左に寄ります。

.triangle {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #1a1a1a;
}

7.5pxずつにしても解決しません。ブラウザーはボーダーの太さをデバイスピクセルの整数に切り捨てるため（CSS Backgrounds and Borders Level 3）、通常の画面では底辺が14pxになります。先端をちょうど中央にしたいなら、上下向きは幅を、左右向きは高さを偶数にしてください。なお、このマークが開閉状態を示す唯一の手がかりになっている場合は、スクリーンリーダー向けに aria-expanded やテキストでも状態を伝える必要があります。

全角で入力したカラーコード

カラーコードの欄が受け付けるのは、半角の # と6桁の16進数だけです。日本語入力がオンのまま打った ＃ｆ２ｆ２ｆ２ は形式に合わないため、状態行にヒントが表示され、色は変わりません。初期色 #3b82f6 のまま方向「左」、幅10、高さ16にして全角で入力した結果がこれです。

.triangle {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 10px solid #3b82f6;
}

コピーした色が思ったものと違うときは、# や英字が全角になっていないか確認してください。

制限

• 色は1色だけです。 ボーダー1本には1色しか付けられないので、グラデーションや画像での塗り、線、斜めの辺に沿った box-shadow は作れません。それらが必要なら clip-path ジェネレーターで clip-path: polygon(50% 0, 100% 100%, 0 100%) のように切り抜きます。
• サイズは1〜500の整数ピクセルです。 幅や高さが空、0、負の数、小数、500を超える値のときは、生成されたCSSの下にエラーが出てCSSとプレビューが消え、有効な値に戻すと表示されます。
• サイズはピクセルだけです。 ボーダーの太さにパーセントは使えないため、ボーダーの三角形は親要素に合わせて伸縮しません。
• 色は # と6桁の16進数だけです。 3桁や8桁のコード、色名、rgba() では色は変わらず、ヒントが表示されます。currentColor やカスタムプロパティを使うときは、コピーしたCSSを書き換えます。
• HTMLは常に <div class="triangle"></div> です。 別のクラス名にする場合は、HTMLとCSSの両方を変えます。

主な使用例

CSS三角形は、ツールチップの矢印、ドロップダウンの印、パンくずリストの区切り、吹き出しのしっぽなどに使われます。ボーダーだけで描くので画像を読み込む必要がなく、色はCSS変数でテーマに合わせて切り替えられます。