トップへ(mam-mam.net/)

CSSのclip-pathで要素(画像含む)を切り取って表示する方法

検索:

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%);}