Draw a curve with css

css, curve

Solution

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>

Problem

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: Is this possible? If so, how can it be done?

Original source

Related problems