Question 184249 in CSS Question posted in
Some basic documentation can be found here.

CSS: cropped Box Shadow

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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search