csscurve

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

Is this possible? If so, how can it be done?


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>