用css画一条曲线

Question

我想用css创建一个模拟波浪运动的动画 我需要为此更改一条直线或一条曲线...
我熟悉的CSS规则使整个div变为半圆形或改变元素边界 例如： border-radius，或perspective或border-top-radius ...
此图像显示了我想要的内容：

你有这方面的经验吗？还是可能的？
提前致谢...

Answer 1

您可以使用非对称边框来制作带有CSS的曲线。

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

VIEW DEMO

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;