CSSで三角形を作る方法としては、border を使ったテクニックがよく知られています。しかし、通常の border 三角形はエッジが鋭く、UIパーツとして使うと少し硬い印象になりがちです。吹き出しの矢印やツールチップ、ボタンのポインタなどでは、角が少し丸い「角丸三角形」を使いたい場面が多くあります。本記事では、画像やSVGを使わず、CSSだけで角丸三角形を作る代表的な実装方法と、その考え方を解説します。
通常のCSS三角形の仕組みを整理する
CSSの三角形は、幅と高さを0にした要素に対して border を指定し、一方向だけに色を付けることで作られます。この方法は軽量ですが、border の交点がそのまま角になるため、角丸を直接指定することができません。
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 12px;
border-color: transparent transparent transparent #333;
}
この構造を理解したうえで、どこを丸めるかを考えることが重要になります。
擬似要素を重ねて角丸を表現する方法
最も実務で使われやすいのは、三角形の上に小さな丸や疑似的なマスクを重ね、視覚的に角を丸く見せる方法です。完全な幾何学的角丸ではありませんが、UI用途では十分自然に見えます。
.triangle-rounded {
position: relative;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 12px;
border-color: transparent transparent transparent #333;
}
.triangle-rounded::after {
content: "";
position: absolute;
left: -12px;
top: -8px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #333;
}
この方法では、丸い要素を重ねることで、先端や根元の角が丸く見えるようになります。
transformとborder-radiusを使った疑似三角形
三角形を border で作るのではなく、正方形を回転させて三角形に見せる方法もあります。この場合、border-radius を指定できるため、自然な角丸表現が可能です。
.triangle-rotate {
width: 12px;
height: 12px;
background: #333;
border-radius: 3px;
transform: rotate(45deg);
}
この要素を上下左右の一部だけ表示することで、角丸三角形として使えます。ツールチップの矢印などでよく使われる手法です。
overflowを使って表示範囲を切り取る
回転させた正方形をコンテナで切り取ると、意図した向きの三角形だけを表示できます。これにより、上下左右の角丸三角形を柔軟に作れます。
.triangle-wrapper {
width: 12px;
height: 6px;
overflow: hidden;
}
.triangle-wrapper .triangle-inner {
width: 12px;
height: 12px;
background: #333;
border-radius: 3px;
transform: rotate(45deg);
}
この方法は、角丸の度合いを border-radius で直感的に調整できる点が大きなメリットです。
before・afterを組み合わせた安定パターン
吹き出しやポップアップの矢印では、本体要素と角丸三角形を一体として扱うことが多くなります。その場合、擬似要素で三角形を作り、位置調整をまとめて管理すると保守性が高くなります。
.tooltip {
position: relative;
padding: 8px 12px;
background: #333;
color: #fff;
border-radius: 4px;
}
.tooltip::after {
content: "";
position: absolute;
bottom: -6px;
left: 20px;
width: 12px;
height: 12px;
background: #333;
border-radius: 3px;
transform: rotate(45deg);
}
本体と矢印の色や角丸を揃えることで、自然な一体感が生まれます。
レスポンシブとスケーリングへの配慮
角丸三角形はサイズが小さいため、px 固定だと文字サイズ変更時にバランスが崩れることがあります。em 単位を使い、テキストサイズに連動させる設計にしておくと、レスポンシブ環境でも安定します。
SVGを使うべきケースとの線引き
CSSだけで角丸三角形は十分実用的に作れますが、正確な曲線制御や複雑な形状が必要な場合はSVGのほうが適しています。単色・単純形状・装飾用途であればCSS、それ以上を求める場合はSVG、という使い分けが現実的です。
まとめ
角丸三角形は、border による三角形をそのまま使うのではなく、擬似要素の重ね合わせや、回転した正方形と border-radius を組み合わせることでCSSだけでも実現できます。用途に応じて表現精度と実装コストのバランスを取りながら、再利用しやすいパターンとして設計しておくことが、実務で扱いやすいCSSにつながります。
