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

User · Answer

You could use an asymmetrical border to make curves with CSS   border-radius  50  100px 100px 0 0   VIEW DEMO   x000D   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   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