CSS三角形ジェネレーター｜方向・サイズ・色を自由に調整

CSS三角形ジェネレーターの使い方

このツールでは、方向・幅・高さ・色を調整しながら、borderを使ったCSS三角形をリアルタイムで作成できます。完成したCSSはワンクリックでコピーでき、矢印や吹き出し、装飾などへ使用できます。

1. 方向を選択する：上下左右と斜めを含む8方向から、三角形の向きを選びます。
2. サイズを調整する：幅と高さをスライダーまたは数値で設定します。
3. 色を設定する：カラーピッカーまたはカラーコードで三角形の色を変更します。
4. 背景色を設定する：使用予定の背景に近い色を指定して、見え方を確認します。
5. 出力形式を選択する：通常の要素、before、afterから使用する形式を選びます。
6. CSSをコピーする：プレビューを確認し、「CSSをコピー」を押します。

CSSだけで三角形を作る仕組み

CSSの三角形は、要素の幅と高さを0にして、borderの太さと色を組み合わせることで作成します。表示したい方向のborderだけに色を指定し、それ以外をtransparentにすると三角形になります。

画像やSVGを使用しないため、CSSだけで色やサイズを変更できます。拡大しても画像のようにぼやけず、ページへ追加する通信量も抑えられます。

三角形の幅と高さを調整する方法

「幅」を変更すると三角形の横方向のサイズが変わり、「高さ」を変更すると縦方向のサイズが変わります。幅と高さを同程度にするとバランスのよい形になり、どちらか一方を大きくすると細長い三角形を作成できます。

プレビューを確認しながら、設置する場所に合わせてサイズを調整してください。

通常要素と疑似要素の違い

通常の要素

HTMLに三角形専用の要素を追加して使用する形式です。単独の矢印や装飾として配置したい場合に適しています。

before・after疑似要素

既存の要素へ三角形を追加したい場合は、beforeまたはafterを使用します。吹き出しの先端、ボタンの矢印、見出しの装飾などを、HTML要素を増やさずに実装できます。

疑似要素として使用する場合は、生成されたCSSへ含まれるcontentの指定も一緒に使用してください。

CSS三角形の主な使用例

• 吹き出しの先端
• リンクやボタンの矢印
• パンくずリストの区切り
• 見出しやラベルの装飾
• ドロップダウンメニューの矢印
• ツールチップの先端

よくある質問

斜め方向の三角形も作れますか？

左上・右上・左下・右下を含む8方向に対応しています。方向ボタンを押すだけでCSSが自動的に切り替わります。

背景色は生成されるCSSに含まれますか？

プレビュー背景色は見え方を確認するための設定です。三角形としてコピーされるCSSには含まれません。

スマートフォンでも利用できますか？

スマートフォンやタブレットにも対応しています。画面上でサイズや色を調整し、生成されたCSSをコピーできます。

生成したCSSを商用サイトで使用できますか？

生成されたCSSは、個人・商用を問わず自由に使用できます。クレジット表記も必要ありません。

設定を最初の状態に戻せますか？

「初期設定に戻す」ボタンを押すと、方向・サイズ・色・出力形式を初期状態へ戻せます。

関連ツール

背景やボタンに使用するグラデーションを作りたい場合は、CSSグラデーションジェネレーターを利用してください。色・角度・位置・透明度を調整しながらCSSを作成できます。