使用CSS绘制曲线

Question

我希望用CSS创建一个模拟波浪运动的动画。
在此之前，我需要将一条或者一个div变成曲线形状。
目前我所熟悉的CSS规则只能将整个div变成半圆形或改变边框样式。
例如：border-radius, 或者 perspective 或者 border-top-radius...
这张图片展示了我想要的效果：

这种效果是否可以实现？如果可以，怎么做呢？

- Kiyarash

---

可能是使用HTML和/或CSS创建曲线的重复问题。 - Josh Crozier

谢谢@JoshC，有没有规则可以制作不规则曲线？ - Kiyarash

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>

- Elad Shechter

---

如果我需要这条曲线在内部怎么办？ - Navaneeth

你说的“inside”是什么意思？@Navaneeth - cwiggo

意思是曲线内部有曲率。假设我们有y坐标为10的点，曲线应该在10以下... - Navaneeth

这对我有用：transform: rotateX(180deg);http://codepen.io/afisher88/pen/vKxvXp - Antfish

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>

- Satish Kumar Verma