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.

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.

• javascript
• html
• css
• svg

Share Improve this question Follow asked Mar 17, 2015 at 12:34 chillmaochillmao 11333 silver badges77 bronze badges 5

• 2 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][caniuse./#feat=border-radius] or svg – rafaelcastrocouto Commented Mar 17, 2015 at 12:38
• Try to this way css-tricks./examples/ShapesOfCSS – Rohit Azad Malik Commented Mar 17, 2015 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 Commented Mar 17, 2015 at 12:50
• Possible duplicate - stackoverflow./questions/17202548/… – Paulie_D Commented Mar 17, 2015 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 Commented Mar 17, 2015 at 13:12

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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>