Curved Effect With border-radius and box-shadow

Question

For all the css shape creators: any idea how you can make this kind of curved line with only css?

CSS is not the right tool to create such wavy patterns. Don't do it using CSS. Instead try SVG. If you still want to use CSS then you may find some help in these threads - [one](http://stackoverflow.com/questions/27785114/how-can-i-make-a-full-width-wave-in-css), [two](http://stackoverflow.com/questions/27777470/wave-or-shape-with-border-on-css3). — Harry, Mar 11 '16 at 10:54

score 3 · Answer 1 · answered Mar 11 '16 at 17:36

One posibility (if you want to stay with pure CSS) would be to use radial gradients

You need one on the left side, with the center upwards, and another on the right side, with the center downwards

.test {
  border: solid 1px blue;
  width: 600px;
  height: 50px;
  background-repeat: no-repeat;
  background-image: radial-gradient(circle at 50% -563px, red 600px, transparent 600px), 
                    radial-gradient(circle at 50% 603px, transparent 600px, red 600px);
  background-size: 50% 40px;
  background-position: left bottom, right bottom;
}

<div class="test"></div>

score 0 · Answer 2 · edited Mar 11 '16 at 17:16

0

i would recommend to make your wave for example with paint. save it as an picture and put it as background from a div in your css. Its easier and has the same effect i think.

edited Mar 11 '16 at 17:16

vals

61,425
11
89
138

answered Mar 11 '16 at 13:27

theoretisch

1,718
5
24
34

Curved Effect With border-radius and box-shadow

2 Answers2