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...
The answer is
You could use an asymmetrical border to make curves with CSS.
border-radius: 50%/100px 100px 0 0;
_x000D_
_x000D_
_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_
}<div class="box"></div>@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_
_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_
}<div class="box"></div>Source: Stackoverflow.com