使用 CSS 的顶部波浪 div [重复]答案

【问题标题】：Top wavy div using CSS [duplicate]使用 CSS 的顶部波浪 div [重复]
【发布时间】：2020-07-27 17:28:46
【问题描述】：

我试图创建一个这样的 div：

我想出了一个使用 SVG 的解决方案，即

div {
  width: 100px;
}

<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="450 0 50 150">
          <path id = "zone1" d="M450,150 v-50 q12.5 -10, 25, 0 t25 0 v50 z" fill="gray"></path>
  </svg>
</div>

但是有没有办法只使用 CSS 来做到这一点？

【问题讨论】：

为什么不喜欢 svg？
没有反对 SVG，只是弄清楚它是否可能。有什么想法吗？
有一个例子。我应该把它扔在 cmets 中，还是在问题的解决方案中？
如果是链接，请在 cmets 中分享或发布答案...
阻止了我的回答，指出它是复制粘贴。没错，就是复制粘贴！这不是我的决定。我一开始就知道了！

标签： html css

【解决方案1】：

.fill-gray {
  background-color: gray;
}

.semi-circle {
  border-radius: 50%;
  width: 150px;
  height: 80px;
  background-color: green;
  position: absolute;
}

.semi-circle-1 {
  top: -25px;
  left: 0px;
  background-color: gray;
}

.semi-circle-2 {
  top: -60px;
  left: 135px;
  background-color: white;
}

.rectangle {
  width: 275px;
  height: 400px;
  position:relative;
  top: 100px;
  border-top-left-radius: 15px;
}

<div class="fill-gray rectangle">
<div class="fill-gray semi-circle semi-circle-1"></div>
<div class="fill-gray semi-circle semi-circle-2"></div>
</div>

这是我为使用 CSS 定位的解决方案制作的 repl.it： Make a wave with CSS

或者，如果您愿意，可以使用以下解决方案中的剪辑路径：Wavy shape with css

【讨论】：