Create curved background with box-shadow [duplicate] - html

Question

I am thinking how to style a squizzed box like this:
I found that I can achieve a similar result with pseudo elements and border-radius as percentage.
Here is the CodePen: https://codepen.io/micu22/pen/eYzpmqR
And here is the code:
div {
background: lightblue;
padding: 10px 20px;
border-radius: 8px;
position: relative;
}
div::after,
div::before {
content: "";
position: absolute;
background: white;
width: 100%;
height: 20px;
left: 0;
}
div::before {
top: -17px;
border-radius: 50%;
}
div::after {
bottom: -17px;
border-radius: 50%;
}
But maybe there is an easier or just more elegant solution?

Answer 1

I would do it like below, using gradient coloration and an SVG filter:
.box {
width:200px;
height:250px;
background:
/* v-- adjust the 15% here */
radial-gradient(50% 15% at top, transparent 98.5%,lightblue) top,
radial-gradient(50% 15% at bottom,transparent 98.5%,lightblue) bottom;
background-size:100% 51%;
background-repeat:no-repeat;
filter: url('#goo');
}
<div class="box"></div>
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs> <!-- adjust the the 13 here --v -->
<filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="13" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>

Answer 2

It depends on how the content is going to exist. If this is a fixed height container, I'd probably opt for a solution using an SVG background.
I think the most elegant (or at least intrinsic) solution would involve using clipping paths. This would allow you to create an SVG of the exact shape you want and clip the container or background image for the container so that you aren't disguising a still technically visible part of the element.
Clippy is a great tool if you've never worked with clipping masks before.