Draw a curve with css

Question

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

User · Accepted Answer

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

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

VIEW DEMO

_x000D_

.box {_x000D_
  width: 500px; _x000D_
  height: 100px;  _x000D_
  border: solid 5px #000;_x000D_
  border-color: #000 transparent transparent transparent;_x000D_
  border-radius: 50%/100px 100px 0 0;_x000D_
}

_x000D_

<div class="box"></div>

_x000D_

User · Answer

Navaneeth and  Antfish  no need to transform you can do like this also because in above solution only top border is visible so for inside curve you can use bottom border    x000D   x000D   box   x000D    width  500px  x000D    height  100px  x000D    border  solid 5px  000  x000D    border-color  transparent transparent  000 transparent  x000D    border-radius  0 0 240px 50  60px  x000D    x000D   lt div class  box  gt  lt  div gt  x000D   x000D   x000D

[css] Draw a curve with css

Examples related to css

Examples related to curve