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: curve

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

possible duplicate of [Curved lines using only HTML and/or CSS](http://stackoverflow.com/questions/4698830/curved-lines-using-only-html-and-or-css) — Josh Crozier, Dec 27 '13 at 15:46
Thanks @JoshC, is there any rule that make a irregular curve? — Kiyarash, Dec 27 '13 at 16:07

score 92 · Accepted Answer · edited Jun 18 '18 at 20:56

92

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>

edited Jun 18 '18 at 20:56

ifconfig

6,242
7
41
65

answered Jan 08 '15 at 21:15

Elad Shechter

3,885
1
22
22

What if I need that curve to be inside? – Navaneeth Sep 28 '15 at 05:09
What do you mean by inside? @Navaneeth – cwiggo Oct 12 '15 at 13:03
Means a curve with curvature inside. Let's say we have points with y coordinate 10, the curve should be below ten... – Navaneeth Oct 12 '15 at 13:08
1

This worked for me: transform: rotateX(180deg); http://codepen.io/afisher88/pen/vKxvXp – Antfish Jun 29 '16 at 10:53

score 15 · Answer 2 · edited Jul 04 '18 at 07:23

15

@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.

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

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

edited Jul 04 '18 at 07:23

mplungjan

169,008
28
173
236

answered May 10 '17 at 12:04

Satish Kumar Verma

191
1
5

Draw a curve with css

2 Answers2

Linked