如何使用CSS制作蛋形

Question

我正在尝试使形状类似于此图中的形状：

尝试使用边框半径定位div的左上角和左下角会产生接近效果，但无法获得如此剧烈的曲线。是否有一个优雅的解决方案？我对剪切路径进行了一些研究，但不确定是否采用这两种方法。

Answer 1

您可以使用border-radius来做到这一点：

.box {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.box:before {
  content: "";
  position: absolute;
  width: 120%;
  height: 150%;
  transform: rotate(-50deg) translate(45%, 15%);
  background: grey;
  border-radius: 35px;
}

<div class="box">

</div>

或使用SVG作为背景：

.box {
  width: 200px;
  height: 200px;
  position: relative;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='grey'><path d='M32 0 C12 28 10 18 38 64 L64 64 L64 0 Z' /></svg>") center/100% 100% no-repeat;
}

<div class="box">

</div>

更新

如果您想使用下面的地图，可以尝试以下操作：

.box {
  width: 200px;
  height: 200px;
  position: relative;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='white'><path d='M32 0 C12 28 10 18 38 64 L0 64 L0 0 Z' /></svg>") center/100% 100% no-repeat,
  url(https://picsum.photos/200/200?image=1069);
}

<div class="box">

</div>