How to create a Cross Curved Box using div [duplicate] - html

Question

This question already has answers here:
'Inverted' border-radius possible? [duplicate]
(3 answers)
Closed 2 months ago.
I want to create a box like this:
It's not looking like that curved. I tried but don't know how to make it. Please help me with some solutions.
.test {
width: 300px;
height: 50px;
background-color: #EFB046;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
}
<div class="test"></div>

Answer 1

You can use gradient like below:
.box {
--r: 40px; /* control the curvature*/
--g: #0000 98%,#EFB046; /* the color here */
width: 250px;
height: 80px;
background:
radial-gradient(var(--r) 100% at var(--r) 0 ,var(--g)) calc(-1*var(--r)) 0,
radial-gradient(var(--r) 100% at var(--r) 100%,var(--g)) calc(-1*var(--r)) 100%;
background-size: 100% 50%;
background-repeat: repeat-x;
}
body {
background: #000;
}
<div class="box"></div>

Answer 2

The trick is used ::before and ::after. In my code you can add border-radius in the CSS.
.pointed {
position: relative;
width:200px;
height:40px;
margin-left:40px;
color:#FFFFFF;
background-color:#c08457;
text-align:center;
line-height:40px;
}
.pointed:before {
content:"";
position: absolute;
right: 100%;
top:0px;
width:0px;
height:0px;
border-top:20px solid transparent;
border-right:40px solid #8d4e24;
border-bottom:20px solid transparent;
}
.pointed:after {
content:"";
position: absolute;
left: 100%;
top:0px;
width:0px;
height:0px;
border-top:20px solid transparent;
border-left:40px solid #8d4e24;
border-bottom:20px solid transparent;
}
<div class="pointed"> Text Content </div>

Answer 3

This question here details what you are requesting
Please Read it and its various answers.
In short it looks like there are 2 approaches.
One is to create 4 elements to block out the content of the main element, the downside to this approach is you will not be able to see any content underneath it incase there is any
The second would be to create an SVG to put in a path element. This would allow you to create the cutout you are looking for. an example could look like as such
Shown below are the HTML and CSS for the 2 possible solutions. Note the path was drawn poorly using a free SVG editor but gives the general idea of what can be done
HTML
<div id="four-element">
<p class="SpanText">Hello World</p>
<div class="top left"></div>
<div class="top right"></div>
<div class="bottom left"></div>
<div class="bottom right"></div>
</div>
<div id="svg">
<svg width="100%" height="270px" \>
<path d="M 52 20 C 53 75 10 135 0 135 C 10 135 55 142 57 272 L 268 270 C 269 180 267 163 304 145 C 266 134 246 62 245 19 L 52 20 Z" fill="blue"/>
<text x="145" y="145" text-anchor="middle" alignment-baseline="middle">
Hello World
</text>
</svg>
</div>
CSS
#four-element {
margin: 40px;
height: 100px;
width: 100px;
background-color: #004C80;
position: relative;
overflow: hidden;
}
#four-element div {
position: absolute;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: #FFFFFF;
}
.SpanText{
position: absolute;
top: 25%;
left: 25%;
}
.top { top: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.right { right: -10px; }