css - 向 Angular Material 工具提示箭头添加阴影

Question

我正在尝试向 Angular Material 工具提示箭头添加阴影，但无法做到这一点。如果你可以在stackblitz中看到我已经用箭头自定义了工具提示，但无法向箭头添加阴影。

我的工具提示 CSS:

::ng-deep .tooltip-class {
  background-color: #ffffff !important;
  opacity: 1;
  color: rgba(0, 0, 0, 0.87) !important;
  margin: 0 8px;
  padding: 8px 12px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  border-radius: 6px;
  overflow: visible !important;
  box-shadow: 0px 1px 2px #00000029, 0px 2px 4px #0000001f,
    0px 1px 8px #0000001a;
}

::ng-deep .tooltip-class:before {
  border-right-color: white !important;
}

::ng-deep .tooltip-class:after {
  content: '';
  position: absolute;
  top: 40%;
  right: 100%;
  margin-top: -5px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
}

Answer 1

工具提示箭头是使用 ::after 生成的伪元素。您可以使用 filter 添加阴影。或者您也可以创建一个新的旋转伪元素 ::before 并对其应用 box-shadow，因为将 box-shadow 应用于 ::after > 并不完美，因为它会暴露盒子的透明部分。

.tooltip-class:after {
  filter: drop-shadow(-0.25px 1px 0.75px gray);
}

Stackblitz demo