使用css绘制曲线 [英] Draw a curve with 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>

这篇关于使用css绘制曲线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！