javascript - How do I create curved css content divider? -

I am working on a small web project and getting a nice little detail on the page: a curved content divider Usually these are just lines, but this is not. So I was wondering how to code with CSS or possibly SVG, but I'm not sure how it can work. Here you can see what I mean: As you can see, the above gray content Exactly ends up with the orange curve and curve starting with the white material part below. Is there any way to code with CSS or STVG instead of using images?

Thank you! I highly appreciate any help.

It was my best with CSS circular corners ... could be better

  .divider {width: 100%; Height: 51st; Status: Relative; Hidden flurry; Background: #fff; } .divider: After, .divider: first, after .divider b: .divider b: {content: ""; Display area; Status: Completed; } .divider: after {width: 63.7%; Height: 62.5%; Limit-Radius: 50% 50% 0 0/50%; Bottom: -4 pixels; Left: -7.5%; Border: Red 2px solid; Border-right: transparent 2px solid; } .divider: first {width: 63.6%; Height: 63.7%; Limit-Radius: 0 50% 50% / 50%; Correct: -7.5%; Top: -4 pixels; Background: # aaa; } .divider b {display: block; Width: 50%; Height: 100%; Background: # aaa; } .divider b: after {width: 63.7%; Height: 62.5%; Limit-Radius: 0 50% 50% / 50%; Correct: -7.5%; Top: -4 pixels; Border: Red 2px solid; Border-left: transparent 2px solid; } .divider b: first {width: 63.6%; Height: 63.7%; Limit-Radius: 50% 50% 0 0/50%; Bottom: -4 pixels; Left: -7.5%; Background: #fff; }  

  & lt; Div class = "divider" & gt; & Lt; B & gt; & Lt; / B & gt; & Lt; / Div>