使用css绘制曲线

问题描述

我想用css模拟波浪运动来创建一个动画。 我需要改变一条线或者一条曲线为这个... 我熟悉的CSS规则，使整个div变为半圆形或更改元素边框。 例如： border-radius ，或透视或 border-top-radius ... 此图像向您显示我想：

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

有办法做不对称边框。 p>

例如：

border-radius：50％/ 100px 100px 0 0;

这种方式你可以使用CSS做曲线。

VIEW DEMO

CSS

  .box { width：500px; height：100px;  border：solid 5px＃000;  border-color：＃000 transparent transparent transparent;  border-radius：50％/ 100px 100px 0 0; }   

HTML

 < div class =box>< / div>   

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 perspective or border-top-radius... This image show you what I want:

Do you have experience about this? or is it possible? Thanks in Advance...

There is way to do un-symmetric border.

example:

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

this way you can make curve with CSS.

VIEW DEMO

CSS

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

HTML

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