CSSのCSSのclip-pathプロパティを使う

CSSのclip-pathプロパティを使う


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

Mam's WebSite