CSS: cropped Box Shadow

is it somehow possible to crop a box-shadow on the left and right to make it look like this:

Or do I need to create this using two independent divs?
I would like to make it responsive, and it should keep the relations to each other.

Thanks in advance.

Regards
Lars

It is possible to create the background shape with css by using ::after

Using % should allow the box to be responsive yet maintain the aspect ratios.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.box {
  margin: 10% 0%;
  width: 100%;
  background-color: blue;
  position: relative;
  text-align: center;
  &::after {
    content: '';
    position: absolute;
    left: 10%;
    top: -20%;
    width: 80%;
    height: 140%;
    background-color: red;
    z-index: -1
  }
}

button {
  width: 25%;
  height: 2rem;
  border-radius: 20%;
  margin: 2rem;
  padding: 0.5rem;
  border-radius: 1rem;
}

<!-- language: lang-html -->

<div class="box">
  <button>Button</button>
</div>

<!-- end snippet -->

you can set many shadows on a single element. if increase offset and set negative spread radius, you can draw 2 shadows for your expected result.

see https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

possible example, use your size and own values for your shadow(s)

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

div {
  aspect-ratio: 16/9;
  background: #377172;
  width: 90vmin;
  box-shadow: 0 15vmin 0 -8vmin #CCD5CB, 0 -15vmin 0 -8vmin #CCD5CB
}


/* demo purpose */

html {
  display: grid;
  min-height: 100vh;
  place-items: center
}

div {
  color: white;
  font-size: 10vmin;
  display: grid;
  place-items: center
}

<!-- language: lang-html -->

<div>div & 2 shadows</div>

<!-- end snippet -->

clip-path could also be an option

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

div {
  aspect-ratio: 16/9;
  background: #377172;
  width: 90vmin;
  box-shadow: 0 0 0 8vmin #CCD5CB;
  clip-path: polygon(0 0, 8vmin  0, 8vmin -8vmin, calc(100% - 8vmin) -8vmin,  calc(100% - 8vmin) 0, 100% 0, 100% 100%,  calc(100% - 8vmin) 100%, calc(100% - 8vmin) calc(100% + 8vmin), 8vmin calc(100% + 8vmin), 8vmin 100%, 0% 100%);
}


/* demo purpose */

html {
  display: grid;
  min-height: 100vh;
  place-items: center;
  /* gives a shadow to the div and its shadow 
  filter:drop-shadow(0 0 5px red); 
  ... for infos only not needed */
}

div {
  color: white;
  font-size: 10vmin;
  display: grid;
  place-items: center
}

<!-- language: lang-html -->

<div>div & 1 shadow</div>

<!-- end snippet -->