Kiyarash Kiyarash - 4 months ago 33
CSS Question

Draw a curve with css

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:
curve

Do you have experience about this? or is it possible?

Thanks in Advance...

Answer

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>
Comments