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を生成するためにページのリクエストと一緒に当社のサーバーへ送信されます。ステップ式の流れでは、これらの値はページのリンクにも含まれます。保存はされません。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

HTML フォーマッター

ブラウザ内で HTML を 2 または 4 スペースで整形します。HTML はアップロードも検証もされません。

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

基準のHEXカラーから、モノクロマティック、類似色、補色、トライアド、テトラードのパレットを生成し、コピーしやすいCSS変数として書き出します。

変更ログジェネレーター

分類した項目から Keep a Changelog 形式の Markdown セクションを作成します。Added、Changed、Fixed、Removed の各カテゴリに項目を貼り付け、Markdown かプレーンテキストを選んで出力をコピーするだけです。

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