Draw a curve with css

css curve
Kiyarash picture Kiyarash · Dec 27, 2013 · Viewed 105.3k times · Source

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

Elad Shechter picture Elad Shechter · Jan 8, 2015

You could use an asymmetrical border to make curves with CSS.

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

VIEW DEMO

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

Related questions

How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More
How to align a <div> to the middle (horizontally/width) of the page

I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.

Read More