【HTML/CSS】もっと詳しくclip-path！図形を作ったり画像を切り抜いたりが簡単に！<div class="circle"></div>.circle { clip-path: circle(30%); background-color: pink; width: 200px; height:200px; }clip-pathの座標clip-pathの座標について頭に入れておきましょう。 座標の原点は左上で、そこから右方向にx軸、下方向にy軸が伸びていきます。 半径100pxの円を描くとします。 clip-path: circle(100px at 0 0);値は「circle(円のサイズ at ポジション)」と数値またはパーセントを用いて指定します。 「circle(100px at 0 0)」とすると、「100pxの円を、中心がleftから0、topから0の位置に配置」となり、下図のようになるため表示されるのは円の右下部分のみになります。 つまり、外側4分の3はクリッ
