How to implement a Spread out edge in CSS [duplicate] - css

Question

I have CSS code
#box {
width: 200px;
height: 50px;
background-color: blue;
border-top-left-radius: 9999px;
border-bottom-left-radius: 9999px;
position: relative;
margin: 30px;
text-align: center;
color: white;
padding-top: 10px;
}
#box::before,
#box::after {
content: "";
width: 0;
height: 0;
right: 0;
position: absolute;
}
#box::before {
border-right: 10px solid blue;
border-top: 10px solid blue;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent;
bottom: -20px;
}
#box::after {
border-right: 10px solid blue;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid blue;
position: absolute;
top: -20px;
}
<div id="box">#box</div>
which gives some shape like
shape I need is
I need curved line instead of hypotenuse in triangles at top-right (#box::before) and bottom-right (#box::after) as in image.
Is there any way to achieve using pure CSS ?
codesandbox demo
Thanks

Answer 1

You can create a concaved radius using the box-shadow property.
This technique creates a transparant square with overflow hidden.
It then creates a transparant circle with a box shadow.
We then adjust the position of the circle to only view 1 quarter of
it.
SNIPPET
#box {
position: relative;
width: 200px;
height: 50px;
background-color: blue;
border-radius: 9999px 0 0 9999px;
margin: 30px;
text-align: center;
color: #fff;
padding-top: 10px;
}
#top,
#bottom {
position: absolute;
height: 30px;
width: 30px;
right: 0;
overflow: hidden;
}
#top {
top: -30px;
}
#bottom {
bottom: -30px;
}
#top::before,
#bottom::before {
content: '';
position: absolute;
right: 0;
height: 200%;
width: 200%;
border-radius: 100%;
box-shadow: 10px 10px 5px 100px blue;
z-index: -1;
}
#top::before {
top: -100%;
}
<div id="box">
<div id="top"></div>
#box
<div id="bottom"></div>
</div>

Answer 2

You can easily achieve this by using svg background images like in this snippet. Here the curves may not the way you want but surely you can change the path in the svg to your needs.
#box {
width: 200px;
height: 50px;
background-color: blue;
border-top-left-radius: 9999px;
border-bottom-left-radius: 9999px;
position: relative;
margin: 30px;
}
#box::before,
#box::after {
content: "";
width: 20px;
height: 20px;
right: 0;
position: absolute;
}
#box::before {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path fill="blue" d="M0 0 Q20 0 20 20 L20 0Z" /></svg>');
bottom: -20px;
}
#box::after {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path fill="blue" d="M0 20 Q20 20 20 0 L20 20Z" /></svg>');
top: -20px;
}
<div id="box"></div>

Answer 3

Can you use negative space? You could have a container with the same background color as your shape, then round the corners surrounding elements to create the illusion.
.container {
background-color: blue;
width: 100%;
}
.negat {
background-color: white;
height: 100px;
}
.posit-bg {
background-color: white;
}
.posit {
background-color: blue;
height: 100px;
border-radius: 50px 0px 0px 50px;
}
.top {
border-radius: 0px 0px 50px 0px;
}
.bot {
border-radius: 0px 50px 0px 0px;
}
<div class="container">
<div class="negat top"></div>
<div class="posit-bg">
<div class="posit"></div>
</div>
<div class="negat bot"></div>
</div>

Answer 4

#box{
width:200px;
height:50px;
background-color:blue;
color:#ffffff;
text-align:center;
padding-top:30px;
border-radius:9999px 0 0 9999px;
}
.sq{
width:25px;
height:25px;
background-color:blue;
}
#sq1,#sq2,#sq11,#sq22{
border-radius:-999px;
margin-left:175px;
}
.sq1{
background-color:#ffffff;
height:25px;
width:25px;
}
#sq11{
border-bottom-right-radius:9999px;
margin-bottom:-25px;
position: relative;
z-index:1;
}
#sq22{
border-top-right-radius:9999px;
margin-top:-25px;
position: relative;
z-index:1;
}
<div class="sq1" id="sq11"></div>
<div class="sq" id="sq1"></div>
<div id="box">#box</div>
<div class="sq" id="sq2"></div>
<div class="sq1" id="sq22"></div>