多角形の切り抜き画像に動きを加えた投稿記事を書く楽しみ方

先ずは「clip-path」の指定について、polygon(多角形) の頂点の座標を操作することが分かっていても、矩形、円形、星形などさまざまな形で画像の切り抜くことが難しい。そこでサイトを巡って見つけることできた 「CMAN」 感謝！ で自サイトにて使いたい多角形をコピーして整形したコードで「Style CSS」へ貼り付けた。

又、 「CSS clip-path Maker」 感謝！ と言うサイトがあって「clip-pathでbasic-shapeの値」の使い方の画像サイズから「inset」「circle」「ellipse」「polygon」に対して、どの形状で指定するかによって値の書き方が少し違ってくることや、画像の大きさから見た形状をチェックできる。

整形したコードは同じパターンで統一して追加CSS又は、Style.CSSに追加した。

/*--- 双方向 (150x150)---*/　←画像サイズ（任意、メディアで統一）
.clip-d {  ←アルファベット順に
  clip-path : polygon(40px 0px ,0px 75px ,40px 150px ,40px 110px ,115px 110px ,115px 150px ,150px 75px ,115px 0px ,115px 40px ,40px 40px );}
.clip-d:hover {transform: rotate(10deg);} ←動き

形状等のサンプル（星形、楕円形、卵形、菱形、双方向形、円形）又、スタイル的なことも考えて画像に動きを「マウスが触れる（:hover{}」入れながら試していくことにした。

今のところ「clip-path」の複雑系、例えば葉っぱ形とか複雑系などもあるけど、投稿記事に張り付けるまでに至っていない。