shapes

概要

CSS基本シェイプ関数は、clip-pathやshape-outsideで要素の表示領域やテキストの回り込み形状を定義するために使用します。circle()は円、ellipse()は楕円、inset()は矩形（角丸付き可）、polygon()は多角形を作成できます。画像のクリッピングやテキストの非矩形レイアウトなど、CSSのみで視覚的に豊かなデザインを実現する基本ツールです。

対応ブラウザ

基本構文

.circle {
  clip-path: circle(50%);
}
.diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.rounded {
  clip-path: inset(10% round 20px);
}

実務での使いどころ

• 画像の非矩形クリッピング

  プロフィール画像を円形にクリッピングしたり、ヒーロー画像をダイヤモンド型に切り抜いたりします。

注意点

アクセシビリティ

• クリッピングによる装飾的な図形はテキスト情報を隠さないよう設計し、重要なコンテンツが切り取られないよう注意してください。

参考リンク

• MDN Web Docs — shapes
• Can I use — shapes