使用 a:before background 反转边框半径？

Question

I want to do an inverted border radius using a background, like so:

Here is my code:

 .curved { background: #D3041E; height: 200px; width: 100%; position: relative; }.curved::before { content: ''; border-bottom-left-radius: 50% 100%; border-bottom-right-radius: 50% 100%; position: absolute; top: 0; width: 100%; background: #fff; height: 3%; }

 <div class="curved"> </div>

and here's what I get so far:

Answer 1

Since you have no fine control on the curve made by border radius, the next best option could be drawing splines with svg.

I made a very simple path for the sake of this example. There are further details here:

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

Frankly speaking the path I chose doesn't perfectly match with your expected result, anyway feel free to walk through this path (no pun intended) if you can't find the solution aimed for using the magics of borders

 .curved{ background: #D3041E; height: 200px; width: 100%; position: relative; }

 <div class="curved"> <svg width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <path d="M 0 0 C 25 10, 75 10, 100 0" fill="white" /> </svg> </div>