CSSの `clip-path` を使えば、要素や画像を三角形・円・多角形など、自由な形に切り抜くことができます。
このページでは、`polygon()` や `circle()` などの指定方法を、実際の表示例とともに紹介し、アニメーションとの組み合わせ例も掲載しています。
「clip-pathの使い方がよく分からない」「polygonの座標指定が難しい」と感じている方におすすめの内容です。
clip-pathプロパティはCSSでSVGのパス指定を行い、エレメントから切り抜き（クリッピング）ができます。
clip-path:circle(半径 at 中心X 中心Y) や
clip-path:ellipse(半径横 半径縦 at 中心X 中心Y) や
clip-path:polygon(x1 y1, x2 y2, x3 y3, ・・・) のように指定します。
clip-path:circle(40% at 60% 50%)
clip-path:ellipse(20% 40%
at 60% 50%)
clip-path:inset(10px 30%);
clip-path:polygon(10% 10%,
30% 90%, 80% 30%)
0%{clip-path:polygon( 0% 0%,10% 100%,30% 90%, 50% 10%);}
100%{clip-path:polygon(70% 5%,75% 100%,100% 100%, 100% 10%);}