CSSのプロパティであるclip-pathが便利なのでご紹介しようと思います。
CSSで円形を作成する際に、おそらくほとんどのかたが「border-radius」を使用していると思います。
私も下記のような書き方でいろいろな円形や変形を作成してきました。

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;

clip-pathプロパティは以下の記述でさまざまな円形を作成することができます。
単純に円形を作成するというよりは
四角形から丸をトリミングするような形です。

  clip-path: circle(100px at 50% 50%);

100pxは円の全体サイズです。
50%は半径のパーセンテージの指定です。

See the Pen clip-path by sayuri (@giraffeweb) on CodePen.light

50％部分の値を変更すると様々な形で切り抜くことが可能です。
例えば・・・・

See the Pen NWbNxmM by sayuri (@giraffeweb) on CodePen.light

簡単に面白く抜けますよね！

みなさんもぜひやってみてください✨

• blog,
• code,
• web