创建css个波形

Question

我一直在寻找如何在 css 中重新创建以下图像形式，但没有任何来源可以让我获胜。

下图显示了我正在努力实现的目标

Answer 1

研究叠加几个椭圆渐变作为背景图像：

background-image: radial-gradient(...),
                  radial-gradient(...),
                  radial-gradient(...);

Answer 2

CSS 渐变

这可以使用 CSS 渐变，但我真的建议使用 SVG 替代方案，因为 CSS 中的线条会呈锯齿状

div {
  border: 2px solid black;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 55%, rgba(38, 155, 3, 1) 50%, rgba(38, 155, 3, 1) 56%, rgba(38, 155, 3, 1) 57%, rgba(38, 155, 3, 1) 58%, rgba(169, 3, 41, 1) 60%, rgba(169, 3, 41, 1) 67%, rgba(169, 3, 41, 1) 68%, rgba(109, 0, 25, 1) 69%, rgba(109, 0, 25, 1) 100%);
  background-position: -325px -5px;
  background-size: 700px 300px;
  width: 200px;
  height: 200px;

<div></div>

SVG

这与您想要实现的目标非常接近，并且稍微移动一点坐标，它应该就是您想要的。

SVG 得到了很好的支持，一旦您理解了方法和坐标结构，您就可以使事物看起来完美，并且可以完全响应。

<svg width="100%" preserveAspectRation="none" viewbox="0 0 400 200">
  <path d="M0,5 Q400,40 400,90 L400,0z" fill="#8BC74A"></path>
  <path d="M0,10 Q400,20 400,80 L400,0 L0,0z" fill="#96292D"></path>
  <path d="M0,0 Q400,0 400,40 L400,0z" fill="#700810"></path>
</svg>

Answer 3

Stewertside已经表现得最贴切了。选项，即 SVG，除了使用图像。

另一种选择是径向渐变，维克多和斯图尔赛德已经展示了这一点。

另一个选项是 box-shadow，它允许创建任何编号。阴影，也允许它们的定位。

使用 box-shadow 和溢出隐藏的例子：

div {
  height: 100px;
  width: 600px;
  position: relative;
  overflow: hidden;
}
div:before {
  position: absolute;
  content: "";
  height: 200px;
  width: 820px;
  border-radius: 50%;
  left: -200px;
  top: 8px;
  box-shadow: 70px 70px 0px 70px #8BC74A, 35px 68px 0px 100px #96292D, 0 0 0 120px #700810;
}

<div>
</div>

创建css个波形

Create css wave form

css

css-shapes

CSS 渐变

SVG