Softonic

CSS三角形ジェネレーター

ステップ 1 / 2
次へ

定番のCSS三角形は、実は三角形そのものではありません。幅ゼロ・高さゼロの要素に、3辺が透明で1辺だけに色を付けたボーダーを与え、それらが1点で交わってできる形です。このジェネレーターは、選んだピクセル値のサイズと指定した色で、上・下・左・右の4方向の宣言を出力します。ツールチップの矢印、吹き出し、パンくずリストの区切り記号などに最適です。

ボーダー三角形の作り方

  1. 1

    方向を選ぶ

    上・下・左・右。方向によって、どのボーダーに色が付き、どの3辺が透明のままになるかが決まります。

  2. 2

    サイズを設定する

    サイズ値はすべてのボーダー幅に使われます。60pxの三角形は幅120px（方向によっては高さ120px）になります。

  3. 3

    塗りつぶし色を選ぶ

    色の入力はhex値（例：`#10b981`）のみに対応しています。rgb、rgba、名前付きの色は使えません。色は反対側のボーダーだけに適用されます。

  4. 4

    CSSルールをコピーする

    出力されるのは完全な`.triangle { ... }`のルールセットです。スタイルシートに貼り付け、必要な場所に`<div class="triangle"></div>`を追加してください。

ボーダーの仕組みが機能する理由

要素にwidth: 0とheight: 0を指定すると、4辺のボーダーが1つの中心点で交わります。ボーダーは45度で斜めに接合されるため、各辺はもともと三角形になっています。ただし、そのうち3つは見えないだけです。1辺に色を付けると、その三角形が見えます。

方向の対応表

方向 色の付くボーダー 透明なボーダー
上 border-bottom border-left、border-right、border-top
下 border-top border-left、border-right、border-bottom
左 border-right border-top、border-bottom、border-left
右 border-left border-top、border-bottom、border-right

サイズの計算

3辺の透明なボーダーは同じサイズ値を共有します。色の付くボーダーも同じサイズを使います。したがってsize: 60の三角形は次のようになります。

  • 幅 = 2 × 60 = 120px（上/下向きの三角形）
  • 高さ = 2 × 60 = 120px（左/右向きの三角形）

非対称な三角形（底辺が狭く、頂点が高いもの）が必要な場合は、透明なボーダーに1つのサイズを、色の付くボーダーに別のサイズを指定します。たとえばborder-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid red;とすると、細長い上向きの三角形になります。

代わりにSVGを使うべき場合

  • 3つではなく複数の頂点が必要なとき、<polygon>を使います。
  • 三角形を親要素に合わせて滑らかに伸縮させたいとき、viewBoxとpreserveAspectRatioを使います。
  • グラデーション塗りつぶし、ストローク、または丸みを帯びた先端が欲しいとき、CSSのボーダーではいずれも実現できません。

よくある質問

ボーダーだけでは対応できません。ボーダー幅は%やvwを十分にサポートされた形では受け付けません。滑らかな拡大縮小が必要な場合は、SVGの<polygon>に切り替えるか、通常の要素にclip-path: polygon(...)を使ってください。

ボーダーが交わる角を丸めることはできません。ストロークを付けたパスとstroke-linejoin: roundを用いたSVGを使うか、clip-path: polygon(...)にわずかなfilter: drop-shadowを組み合わせてエッジをぼかしてください。

はい、これが最も一般的な用途です。三角形をツールチップの端に絶対配置し、塗りつぶし色をツールチップの背景色に合わせると、1つの吹き出しのように見えます。

はい。選択した方向・サイズ・色は、CSSを生成するためにページのリクエストと一緒に当社のサーバーへ送信されます。ステップ式の流れでは、これらの値はページのリンクにも含まれます。保存はされません。

関連ツール

プレースホルダー画像ジェネレーター

1〜4000 pxの画像に色と文字を設定し、PNGで保存できます。外部URLとHTMLもコピーできます。

CMYK から RGB への変換

標準的な計算式で CMYK の割合をおおよその RGB 値と Hex 値に変換し、画面用にすばやく確認できます。

HTML 圧縮ツール

通常のコメントを削除し、空白を整理して、ブラウザ内で HTML をコンパクトにします。使用前に結果を確認してください。

ランダム英字ジェネレーター

A-Zの英字をランダムに生成します。文字数を指定し、大文字・小文字・混在を選んで、ゲーム、課題、授業活動に使えます。

Markdownリンク生成ツール

URLとアンカーテキストからMarkdownリンクの記法を生成します。タイトルのツールチップや、長い文書を読みやすく整える参照形式のリンクにも対応しています。

Nginx 設定ジェネレーター

かんたんなフォームから、TLS・HTTP/2・gzip・ブラウザキャッシュ・リバースプロキシの設定を含む Nginx の server block を生成します。

このツールは他の言語でも利用できます