创建css波形

Question

我一直在寻找一段时间来弄清楚如何在css中重新创建下面的图像形式，但没有任何来源让我获胜。

下图显示了我想要实现的目标

Answer 1

CSS Gradients

这可以使用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 2

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

另一种选择是径向渐变，victor和stewertside已经证明了这一点。

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

使用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>

Answer 3

将上面的几个椭圆渐变视为背景图像：

<intent-filter>
    ...
    <action android:name="android.intent.action.ASSIST" />
    <category android:name="android.intent.category.DEFAULT" />
</intent-filter>