Треугольник с тенями и не равной ширине

Question

Мне нужна левая стрелка размером 40 на 20 пикселей с box-shadow. Я пытался

Подход с единственной правой границей - размеры работают идеально, но есть квадратная рамка:

.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;
  }
}

и подход с двойной рамкой - тень от квадрата отлично работает, но размеры неверны, так как для треугольника должен быть идеальный квадрат:

.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);
 }

}

Можно ли достичь с помощью CSS или мне просто нужно использовать SVG?

Answer 1

Вы можете использовать filter: drop-shadow вместо 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