css - 带框阴影且宽度不相等的三 Angular 形

我正在寻找具有box-shadow的40px x 20px的左箭头。我试过了

单一右边框方法-尺寸可以完美工作，但是有一个方形框边框：

.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？

最佳答案

您可以使用filter: drop-shadow代替box-shadow：

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

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

关于css - 带框阴影且宽度不相等的三 Angular 形，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53255188/