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