'How to create a squeezed box using only css

I am thinking how to style a squizzed box like this:

enter image description here

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?

csscss-shapes


Solution 1:[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>

Solution 2:[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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Temani Afif
Solution 2 mfast

Related Questions