如何创建一个最大的椭圆形圆角的左下三角形，并用它来塑造正方形图像？

Question

我正在尝试使用CSS来创建几乎椭圆形的图像，就像下面的图像一样：

我想我必须先创建一个左下三角形，然后在其顶部添加另一个椭圆形div和方形图像/图片以使其成形。

我不能使用js或SVG，只能使用HTML和CSS。

Answer 1

这里是使用clip-path

的想法

.box {
  height: 500px;
  width:500px;
  background: url(https://picsum.photos/2000/1000?image=1069) center/cover;
  -webkit-clip-path: ellipse(65% 86% at 66% 1%);
  clip-path: ellipse(65% 86% at 66% 1%);
}

<div class="box">

</div>