CSSグラデーションを使った画像切り抜きの続編。卵形と星形では六角形みたいな三角形で端をカットすれば切り抜ける形と違ってもうちょっと工夫が必要になる。その工夫というのはbackground-sizeプロパティーでのサイズの制限。 Demo: CSS Egg Clip radial-gradient()では楕円は描くことができるけど、それを歪めるようなことはできない(と思う)。ので、径の違う楕円を半分ずつ組み合わせて卵形を作ることになる。基本的な部分は六角形のものと同じ。 background-image: radial-gradient( ellipse farthest-corner at 50% 100%, transparent 0, transparent 70%, #fff 70%, #fff 100% ), radial-gradient( ellipse farthest-c
![CSSで卵形と星形に切り抜く](https://cdn-ak-scissors.b.st-hatena.com/image/square/b4e93703c61f50b063784877607619c02020e2f8/height=288;version=1;width=512/https%3A%2F%2Fhail2u.net%2Fimg%2Fblog%2Fcss-egg-and-star-clip.png)