用css画一条曲线

Question

我想用 css 创建一个模拟波浪运动的动画。
为此，我需要将直线或 div 更改为曲线...
我熟悉的CSS规则，将整个div变成半圆形或者改变元素边框。
例如：

border-radius

，或

perspective

或

border-top-radius

...
这张图片向您展示了我想要的：

这可能吗？如果可以的话，该怎么办呢？

Answer 1

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

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

查看演示

.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>

Answer 3

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

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