CSSトライアングルジェネレータ
8つの方向のいずれかを指すピュアCSSトライアングルを生成します。古典的なゼロサイズボーダトリックまたはモダンなclip-pathポリゴン。独自の幅、高さ、色、HTMLスニペット、SVGプレビュー付き。ブラウザ内で完全に動作します。
入力
三角形が指す方向 — 4つの基本方向、または直角のコーナーウェッジ。
ボーダはどこでも機能しますがコンテンツボックスは残りません。clip-pathは実際のボックスを保持し、グラデーションを配置できます。
生成されたルールとHTMLスニペットで使用されます。
出力
三角形がここに表示されます。
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-triangle-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"direction": "up",
"technique": "border",
"width": "100",
"height": "100",
"color": "#464aff",
"className": "triangle"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-triangle-generator` tool (CSS Triangle Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-triangle-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSSトライアングルジェネレータ — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
三角形はCSSが基本形状を持たないいくつかの形状の1つです。shape: triangleはないため、偽造します — ボーダが角でどのように出会うかを悪用するか、長方形を3つのポイントにクリップするか。このジェネレータは両方をあなたのために作成します。方向を選択し、幅、高さ、色を設定して、完成したルールをコピーします。
使い方
- 三角形が指す方向を選択します — 上、下、左、右、または4つの直角コーナーウェッジの1つ（左上、右上、右下、左下）。
- テクニックを選択します — ボーダトリックまたは
clip-pathポリゴン（どちらを選ぶかについては以下を参照）。 - 幅と高さをドラッグして、プレビューが正しく見えるようにします。すべての方向は完全にサイズ変更可能で、コーナーも含まれます。
- 色を設定し、必要に応じてクラス名を設定します — これはCSSルールとHTMLスニペットで使用されます。
- CSSと
<div>スニペットをコピーするか、SVGプレビューをダウンロードして、画像を配信する方が良い場合があります。
ボーダトリックまたはclip-path？
ボーダトリックは要素にwidth: 0; height: 0と太いborderを与えます。隣接するボーダが対角線に沿って出会うため、4つのボーダ領域のそれぞれ自体が三角形です。1つに色を付け、他の3つをtransparentにすると、表示される結果は三角形になります。これはメールクライアントを含め、かつて出荷されたあらゆるブラウザで機能します。これがまだデフォルトである理由です。
その代償は、コンテンツボックスが残らないということです。要素内にテキストまたはアイコンを配置することはできず、三角形にグラデーションまたは背景画像を付与することはできず、その形状をアニメーション化することもできません — ボーダの幅だけです。
**clip-path: polygon()**は実際のwidth × heightボックスに実際のbackgroundを保持し、次に3つのポイントの外側すべてをクリップします。つまり、三角形はグラデーション、背景画像、またはボックスシャドウ（filter: drop-shadow()経由）を持つことができ、ポリゴン自体を遷移できます。サポートはモダンブラウザでは普遍的ですが、レガシーエンジンでは不在で、メールでは不安定です。
経験則：モダンサイトではすべてにclip-pathを使用し、最大のリーチのためにボーダトリックを使用するか、どちらの制限も重要ではない小さな装飾矢印の場合。
数字の意味
カーディナル三角形の場合、幅はベースの長さで、高さはベースから頂点までの距離です。生成されたボーダルールでは、それは側面の2つの半幅として表示されます（100pxの幅の上向き三角形は0 50px 100px 50pxを取得します）。
コーナーウェッジの場合、幅と高さは直角の2つのレッグであり、これらは2つのボーダ幅に直接マップされます — 半減なし。これは、一部のジェネレータがそれらを正方形にロックしているにもかかわらず、ここでコーナーウェッジがサイズ変更可能な理由でもあります。
マシン上で動作しますか？
はい。ルール、HTMLスニペット、およびSVGプレビューはすべてブラウザで構築されます — 何もアップロードされず、ページが読み込まれた後、ツールはオフラインで動作します。
これをツールチップまたはドロップダウン矢印に使用できますか？
これは古典的な使用法です。小さな下向き三角形を生成し（たとえば12×6）、ツールチップ本体に対してposition: absoluteで配置します。ここではボーダテクニックを使用してください — 矢印は装飾的なので、欠落しているコンテンツボックスは何も費用がかからず、どこでもサポートを取得します。
別の形状が必要な場合はどうなりますか？
3つ以上のポイント — 六角形、星、矢印、吹き出し — を備えた何かについては、CSSクリップパスジェネレータを使用してください。これは任意のポリゴンと他のクリップ形状を構築します。通常のボックスのコーナーを丸くするには、ボーダラジウスジェネレータを参照してください。三角形を取得した後に回転またはスキューするには、CSSトランスフォームジェネレータが対応するtransform値を記述します。