0

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

enter image description here

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

Gardinero
  • 331
  • 2
  • 13
  • 1
    No, you can not arbitrarily "cut" shadows, AFAIK. Instead of using _two_ divs for this, I would use a positioned pseudo element for the shadow. – CBroe Jun 12 '23 at 10:50
  • [What about this solution?](https://jsfiddle.net/g51wmrps/) or [same colors you posted](https://jsfiddle.net/g51wmrps/1/), I've played with it a bit, thanks for [How to get box-shadow on left & right sides only](https://stackoverflow.com/a/11997074/14945696). – Kevin M. Mansour Jun 12 '23 at 13:32
  • @KevinM.Mansour Nice, that's exactly what I was trying to achieve. I also played around with using a pseudo element, but did not get a capable result. – Gardinero Jun 12 '23 at 14:19
  • @Gardinero Should I post an answer? – Kevin M. Mansour Jun 12 '23 at 14:20
  • @CBroe you maybe not cut a box-shadow but you can make it smaller than the container with a negative spread value :) . clip-path can also be used cutting-off a path standing outside the container itself – G-Cyrillus Jun 13 '23 at 14:04

2 Answers2

1

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.

.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;
}
<div class="box">
  <button>Button</button>
</div>
J Davies
  • 219
  • 1
  • 7
1

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)

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
}
<div>div & 2 shadows</div>

clip-path could also be an option

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
}
<div>div & 1 shadow</div>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129