CSS三角形作成

borderプロパティを活用した三角形生成の原理

CSSで三角形を作成する伝統的な手法は、borderプロパティの特性を利用します。要素のwidthとheightをゼロに設定し、4辺のボーダー幅を調整することで、三角形が出現します。border: 50px solid transparentを基準に、1辺だけ色を付けることで方向を制御できます。
上向き三角形の場合、border-bottomに色を指定し、他の3辺をtransparentにします。border-leftとborder-rightの幅を等しくすることで、正三角形に近い形状を得られます。border-bottom-color: #3498dbのように色を指定し、border-left: 25px solid transparentで両脇の傾斜を調整します。
直角三角形の実装では、一方の側面ボーダーをゼロにします。border-bottom: 50px solid #e74c3cとborder-left: 50px solid transparentの組み合わせにより、右下から左上への直角三角形が生成されます。パンくずリストの区切り記号や、吹き出しの矢印として頻繁に使用される形状です。
この手法は、IE11を含む古いブラウザでも安定して動作する利点があります。レガシー環境への対応が必要なプロジェクトでは、今でも有効な実装方法です。ただし、要素のサイズ調整が直感的でなく、レスポンシブ対応での数値計算が煩雑になる欠点があります。

clip-pathプロパティによるモダンな三角形実装

clip-pathプロパティのpolygon()関数により、より直感的な三角形生成が可能です。clip-path: polygon(50% 0%, 0% 100%, 100% 100%)という指定で、上向きの三角形を作成できます。各座標は要素の幅と高さに対するパーセント値で指定します。
この手法では、要素自体にwidthとheightを設定し、background-colorで色を指定します。div要素にwidth: 100px; height: 100px; clip-path: polygon(50% 0%, 100% 100%, 0% 100%)と記述することで、明確なサイズ指定が可能です。レスポンシブデザインでの調整も容易になります。
複雑な形状への拡張性が高い点も利点です。五角形や星形といった多角形も、座標を追加するだけで実現できます。デザインの変更要求に対して、柔軟に対応できる将来性があります。transitionプロパティと組み合わせることで、形状のモーフィングアニメーションも実装可能です。
ブラウザサポートは、IE11を除く主要ブラウザで広く対応しています。Safari では-webkit-clip-pathプレフィックスが必要な場合がありますが、Autoprefixerによる自動付与で対応できます。モダンブラウザのみをターゲットとするプロジェクトでは、clip-pathが推奨される実装方法です。

擬似要素を活用した吹き出しUI実装

::beforeや::after擬似要素に三角形を配置することで、吹き出し型のUI要素を構築できます。メインのdiv要素にborder-radiusで角丸の矩形を作り、::afterで三角形の尾を追加する実装が一般的です。
position: absoluteにより、三角形を矩形の任意の位置に配置できます。bottom: -10pxやleft: 50%といった指定で、吹き出しの尾の位置を細かく調整します。transform: translateX(-50%)と組み合わせることで、中央揃えの配置も実現できます。
チャットUIやツールチップでの活用が効果的です。コメント機能やヘルプテキストの表示に、視覚的な方向性を示す三角形を加えることで、情報の出所を明確に伝達できます。z-indexの調整により、重なり順序も制御可能です。
複数の三角形を重ねることで、境界線付きの吹き出しも作成できます。外側に大きな三角形を配置し、内側に小さな三角形を重ねることで、ボーダー効果を実現します。::beforeと::afterを両方使用し、色と位置を微調整する実装パターンが確立されています。

レスポンシブデザインでの三角形サイズ調整戦略

固定ピクセル値での三角形定義は、画面サイズの変化に対応できません。vwや%単位を使用することで、ビューポート幅に応じた可変サイズを実現できます。border-bottom: 5vw solid #2ecc71のような指定により、画面幅の5%を三角形の高さとして確保できます。
@mediaクエリでブレイクポイントごとに三角形のサイズを調整する手法も有効です。スマートフォンでは小さく、デスクトップでは大きくといった段階的な変化により、各デバイスで最適な視覚バランスを維持できます。デザインシステムの一環として、三角形サイズの標準値を定義することが推奨されます。
clip-pathを使用した三角形では、要素自体のサイズをパーセント値で指定することで、親要素に応じた自動調整が可能です。width: 10%; height: autoのような指定により、コンテナの変化に追従する柔軟なレイアウトを構築できます。
CSS Grid LayoutやFlexboxとの組み合わせにより、複雑なレイアウト内での三角形配置も容易になります。グリッドセル内に三角形を配置し、周囲の要素との関係性を視覚的に示す実装が、ダッシュボードUIやデータ可視化で増加しています。

パフォーマンス考慮とアクセシビリティへの配慮

clip-pathによるアニメーションは、計算コストが高くなります。形状の変化を滑らかにアニメーションさせる場合、60fpsを維持できるか事前検証が必要です。代替として、transform: scale()やopacityのアニメーションを優先することで、パフォーマンスを確保できます。
装飾的な三角形は、スクリーンリーダーにとって意味のない要素です。aria-hidden="true"属性を付与することで、支援技術からの認識を除外できます。擬似要素の場合は、デフォルトでスクリーンリーダーに読み上げられないため、特別な対応は不要です。
情報を伝達する三角形（ソート順の矢印など）では、適切な代替テキストの提供が必須です。span要素にaria-label="降順でソート"といった説明を付与し、視覚障害ユーザーにも情報を伝達します。見た目だけでなく、機能的な意味も考慮した実装が求められます。
印刷時には、三角形が正しく出力されない場合があります。@media print内で代替表現に切り替えるか、印刷用CSSで三角形を削除することで、印刷物での視認性を確保できます。ブラウザによってはclip-pathが印刷に反映されないため、重要な情報は三角形のみに依存させない設計原則が重要です。