用css画一条曲线

Question

我想用 css 创建一个模拟波浪运动的动画。
为此，我需要将线条或 div 更改为曲线...
我熟悉的CSS规则，让整个div变成半圆形或者改变元素边框。
例如： border-radius, 或 perspective 或 border-top-radius...
这张图片告诉你我想要什么：

你有这方面的经验吗？或者有可能吗？
在此先感谢...

Answer 1

您可以使用非对称边框通过 CSS 制作曲线。

border-radius: 50%/100px 100px 0 0;

VIEW DEMO

.box {
  width: 500px; 
  height: 100px;  
  border: solid 5px #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 50%/100px 100px 0 0;
}

<div class="box"></div>

Answer 2

@Navaneeth 和@Antfish，不需要转换你也可以这样做，因为在上面的解决方案中只有顶部边框是可见的，所以对于内部曲线你可以使用底部边框。

.box {
  width: 500px;
  height: 100px;
  border: solid 5px #000;
  border-color: transparent transparent #000 transparent;
  border-radius: 0 0 240px 50%/60px;
}

<div class="box"></div>