Vfrdtyky

I am looking to have a left arrow that is 40px by 20px with a box-shadow. I have tried

The single right border approach -- the dimensions work perfectly, but then there is a square box border:

.item {

  ...



  &::before {

    content: '';

    border-bottom: 20px solid transparent;

    border-right: 20px solid #fff;

    border-top: 20px solid transparent;

    box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);

    height: 0;

    left: -20px;

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 0;

  }

}

and the double border approach -- box shadow works great, but the dimensions are incorrect since it needs to be a perfect square for the triangle to work:

.item {

  ...



  &::before {

    border: 20px solid black;

    border-color: transparent transparent #fff #fff;

    transform-origin: 0 0;

    transform: rotate(45deg);

    box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);

 }

}

Is it possible to achieve with CSS or do I just need to a use an SVG?

You can use filter: drop-shadow instead of box-shadow:

    filter: drop-shadow(-3px 3px 3px rgba(0, 0, 0, 0.4));

ref: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow