向角材料工具提示箭头添加阴影

时间:2021-07-17 10:14:17

标签: css angular angular-material styling angular-material-5

我正在尝试向有角度的材料工具提示箭头添加阴影,但无法做到。如果您可以在 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;
}

1 个答案:

答案 0 :(得分:2)

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

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

Stackblitz demo