8方向から1つを選び、幅、高さ、色を設定して、borderまたはclip-pathで作るCSSの三角形をコピーできます。Tailwind版とツールチップの矢印の例も用意しています。
CSSで三角形をきれいに描く方法は2つあります。定番の方法は、サイズ0のボックスに太い枠線を付け、1辺以外をすべて透明にするものです。現代的な方法は、通常のボックスにサイズと背景を付け、3つの点を使ったclip-path: polygon()で切り抜くものです。このジェネレーターは、8方向について両方のコードを書き出します。
border方式とclip-pathのどちらを使うか
ツールチップや吹き出しの矢印、ドロップダウンの記号、リボンの角は、ほとんどが小さなCSSの三角形です。方向を選んでサイズをドラッグすると、プレビューに両方の手法が並んで表示されるので、一致していることを確認してから、コンポーネントに合うほうをコピーできます。
2つの枠線が接する部分では、ブラウザーは角を斜めに描きます。幅と高さを0にすると、ボックスは中央で接する4つのくさび形の枠線だけになります。1つのくさびに色を付け、隣の2つを透明にすると、1つの三角形が見えます。
正三角形の高さは、底辺に3の平方根を2で割った値（約0.866）を掛けたものです。底辺が100ピクセルなら、高さを約87ピクセルにします。
単体ではできません。よくある方法は、三角形を2つ重ねることです。輪郭線の色で少し大きな三角形を後ろに置き、塗りの色の三角形を輪郭線の太さ分ずらして手前に置きます。くっきりした輪郭線が必要なら、strokeを付けたインラインSVGのほうが簡単です。
変えません。要素はレイアウト上では長方形のサイズ全体を保ち、clip-pathは描画される部分を変えるだけです。box-shadowや枠線を含め、多角形の外側にあるものは切り取られます。
スペースの代わりにアンダースコアを使った任意プロパティ、たとえば[clip-path:polygon(50%_0,100%_100%,0_100%)]を、w-[40px] h-[30px] bg-[#4F98FB]のようなサイズと色のクラスと組み合わせて使います。
::after要素にはサイズがありません。上の枠線が矢印になり、左右の枠線は透明です。
borderの三角形にはグラデーションを付けられません。切り抜いたボックスなら付けられます。clip-pathはボックスが描くどんな背景でも切り取るからです。
方向を選び、サイズと色を設定して、コピーする前にborderの三角形とclip-pathの三角形を比較しましょう。
上
下
左
右
左上
右上
左下
右下
三角形の向き
幅：{n}px
高さ：{n}px
色
正三角形にする
border方式
clip-path方式
Tailwind（clip-path）
CSSをコピー
クラスをコピー
無料で始める · クレジットカード不要