html - 如何给三 Angular 形下的阴影？

Question

我无法在三 Angular 形△中给出阴影。
当我为三 Angular 形提供阴影时，它就会失去它们原来的结构。

/* CSS */
.stack_1{
  position: relative;
  display:inline-block;
}

.stack_1:before {
    position: absolute;
    content: 'Title name';
    font-style: italic;
    bottom: -28px;
    padding: 1px 10px;
    left: calc(50% - 20px);
    background-color: #7badce;
    display: inline-block;
    white-space: nowrap;
    color: white;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px outset #3bacf7;
    z-index: 100;
    box-shadow: 0 5px 20px -7px #4c4b4b;
}
.stack_1:after{
    position: absolute;
    content: '';
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 10px solid #7badce;
    left: calc(50% - 20px);
    bottom: -5px;
    transform: rotate(180deg);
    z-index: 100;
}

<!- HTML-->
<article class="stack_1">
<span class="stack_1_info">Hello stackO)verflow</span>
</article>

请注意工具提示下有一个阴影。
但我怎么能在 上留下阴影三 Angular 形△

Answer 1

由于您想要三 Angular 形下方的阴影而不是边界框( box-shadow 影响边界框)，您可以使用 filter: drop-shadow() .filter: drop-shadow适用于渲染元素而不是边界框。
三个注意事项:

filter在 IE11 中不起作用

drop-shadow不接受第四个 - 点差 - 参数

filter对 SVG 元素的浏览器结果不一。

/* CSS */
.stack_1{
  position: relative;
  display:inline-block;
}

.stack_1:before {
    position: absolute;
    content: 'Title name';
    font-style: italic;
    bottom: -28px;
    padding: 1px 10px;
    left: calc(50% - 20px);
    background-color: #7badce;
    display: inline-block;
    white-space: nowrap;
    color: white;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px outset #3bacf7;
    z-index: 100;
    box-shadow: 0 5px 20px -7px #4c4b4b;
}
.stack_1:after{
    position: absolute;
    content: '';
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 10px solid #7badce;
    left: calc(50% - 20px);
    bottom: -5px;
    transform: rotate(180deg);
    z-index: 99;
    /* ADDED THIS */
    filter: drop-shadow(0 -10px 8px #4c4b4b);
}



.stack_2{
  position: relative;
  display:inline-block;
}

.stack_2::before {
    position: absolute;
    content: 'Title name';
    font-style: italic;
    bottom: -28px;
    padding: 1px 10px;
    left: calc(50% - 20px);
    background-color: #7badce;
    display: inline-block;
    white-space: nowrap;
    color: white;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px outset #3bacf7;
    z-index: 100;
    box-shadow: 0 5px 20px -7px #4c4b4b;
}
.stack_2::after{
    position: absolute;
    background-color: #7badce;
    content: '';
    width: 20px;
    height: 15px;
    left: calc(50% - 20px);
    bottom: -5px;
    z-index: 99;
    clip-path: polygon(49% 33%, 0% 100%, 100% 100%);
    box-shadow: 0 0 10px #000;
}

<!- HTML-->
<article class="stack_1">
<span class="stack_1_info">Hello stackO)verflow</span>
</article>


<!- HTML-->
<article class="stack_2">
<span class="stack_2_info">Hello StackOverflow</span>
</article>

关于过滤器的 MDN 文档:
https://developer.mozilla.org/en-US/docs/Web/CSS/filter