Inverted Scooped corners using CSS

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>

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>

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>

Inverted Scooped corners using CSS

Related

Recent Posts