CSS 用css画曲线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20803489/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Draw a curve with css
提问by Kiyarash
I want to create an animation with css that simulate a wave movement.
I need to change a line-or div- to a curve for this...
The CSS rules that I'm familiar to, make the entire div to semicircular or change element border.
For example:
border-radius, or perspectiveor border-top-radius...
This image show you what I want:
我想用 css 创建一个模拟波浪运动的动画。
为此，我需要将 line-or div- 更改为曲线...
我熟悉的 CSS 规则，使整个 div 为半圆形或更改元素边框。
例如：
border-radius, or perspectiveor border-top-radius...
这张图片向你展示了我想要的：
Do you have experience about this? or is it possible?
Thanks in Advance...
你有这方面的经验吗？或者有可能吗？
提前致谢...
回答by Elad Shechter
You could use an asymmetrical border to make curves with CSS.
您可以使用不对称边框通过 CSS 制作曲线。
border-radius: 50%/100px 100px 0 0;
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>回答by Satish Kumar Verma
@Navaneeth and @Antfish, no need to transform you can do like this also because in above solution only top border is visible so for inside curve you can use bottom border.
@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>