csscss-shapes

How to create a squeezed box using only css

I am thinking how to style a squeezed 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?

Solution

  • 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>