时间戳

首页 > 解决方案 > 如何用 CSS 制作鸡蛋形状

css - 如何用 CSS 制作鸡蛋形状

问题描述

我正在尝试制作类似于这张图片中的形状：在此处输入图像描述

尝试使用边界半径来定位我的 div 的左上角和左下角会获得接近效果，但无法获得如此剧烈的曲线。有一个优雅的解决方案吗？我已经稍微研究了剪辑路径，但不确定这是否是采取的方法。

标签： css

解决方案

你可以这样做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>

推荐阅读