Inverted border radius using a :before background? - html

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 with a basic bezier curve 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 may not 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 and you want to consider a different option.
I also added a range slider to show how to alter the curve in real time keeping in mind that here I have only one control point for the bezier curve that I'm simply shifting on the y axis.
const slider = document.querySelector('input[type=range]');
slider.addEventListener('input',(event)=>{
changeCurve(event.target.value);
});
function changeCurve(y){
const d = `M 0 0 Q 50 ${y} 100 0`;
document.querySelector('.curved svg path')
.setAttribute('d', d);
}
.curved{
background: #D3041E;
height: 200px;
position: relative;
border: solid 8px black;
border-top: none;
margin: 1em;
}
.slider {
display: flex;
justify-content: center;
align-items: center;
border: solid;
}
input[type=range]{
cursor: pointer;
margin: 1em;
}
<div class="slider">
<label>Change the curve:</label>
<input
id="slider"
type="range"
value="50"
min="0"
max="100"
step="1">
</div>
<div class="curved">
<svg width="100%" viewBox="0 0 100 100">
<path d="M 0 0 Q 50 5 100 0" fill="white" />
</svg>
</div>