How to create a squeezed box using only css

Question

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

Temani Afif · Accepted Answer · 2020-10-12 20:42:52Z

2

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>

answered Oct 12, 2020 at 20:42

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michał Kuczek Over a year ago

Thanks I am using an svg icon set for my project so this will be easy to add. I have never worked with svg filters and this looks interesting! What do you think of the answer @mfast gave?

mfast · Accepted Answer · 2020-10-12 22:22:06Z

0

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.

answered Oct 12, 2020 at 22:22

mfast

91 bronze badge

Collectives™ on Stack Overflow

How to create a squeezed box using only css

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related