Question

我正在寻找带有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？

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

带框阴影且宽度不相等的三角形

1 个答案: