How do I create curved css content divider?

Question

I'm working on a small web project and got a nice little detail on the page: a curved content divider. Usually those are just lines, but this is not. So I was thinking about, how to code that in CSS or possibly with SVG, but I'm not sure exactly how it could work. Here you can see what I mean: As you can see, the gray content above ends exactly with the orange curve and the white content part beneath start along the curve. Is there any way to code it with css or svg, instead of using images?

Thank you! I highly appreciate any help.

you can do it easily with CSS or SVG, but you should have a fallback to an image since some old browsers might not support [css rounded corners][http://caniuse.com/#feat=border-radius] or svg — rafaelcastrocouto, Mar 17 '15 at 12:38
Try to this way https://css-tricks.com/examples/ShapesOfCSS/ — Rohit Azad Malik, Mar 17 '15 at 12:42
@rafaelcastrocouto I know, but the question is how to do it with CSS and SVG. :) Not sure how this could work with rounded corners only. — chillmao, Mar 17 '15 at 12:50
Possible duplicate - http://stackoverflow.com/questions/17202548/create-wavy-border-with-css — Paulie_D, Mar 17 '15 at 13:06
draw that shape in Inkscape, then save it as svg, open the svg with notepad++ and grab the svg from it and paste it in the html, note: the svg has to have a viewbox and a width and height in order to look ok, hope it helps — ZetCoby, Mar 17 '15 at 13:12

score 7 · Answer 1 · answered Mar 17 '15 at 13:40

This was my best with CSS rounded corners ... can get better

.divider {
  width: 100%;
  height: 51vw;
  position: relative;
  overflow: hidden;
  background: #fff;
}
.divider:after,
.divider:before,
.divider b:after,
.divider b:before {
  content: "";
  display: block;
  position: absolute;
}
.divider:after {  
  width: 63.7%;
  height: 62.5%;
  border-radius: 50% 50% 0 0/50%;
  bottom: -4px;
  left: -7.5%;
  border: red 2px solid;
  border-right: transparent 2px solid;
}
.divider:before {  
  width: 63.6%;
  height: 63.7%;
  border-radius: 0 0 50% 50%/50%;
  right: -7.5%;
  top: -4px;  
  background: #eee;
}
.divider b {
  display: block;
  width: 50%;
  height: 100%;
  background: #eee;
}
.divider b:after {
  width: 63.7%;
  height: 62.5%;
  border-radius: 0 0 50% 50%/50%;
  right: -7.5%;
  top: -4px;  
  border: red 2px solid;
  border-left: transparent 2px solid;
}
.divider b:before { 
  width: 63.6%;
  height: 63.7%;
  border-radius: 50% 50% 0 0/50%;
  bottom: -4px;
  left: -7.5%;
  background: #fff;
}

<div class="divider"><b></b></div>

How do I create curved css content divider?

1 Answers1