如何应用工具提示箭头三角形阴影

Question

我需要创建一个带有框和阴影的工具提示，但是，我很难应用它，框阴影在注释框周围的效果不佳。

我已经检查了不同的答案并尝试应用它，但是，要使其起作用的形状不起作用，我为要与阴影一起应用的形状附加了图像，将如果有人能解决这个问题，请多加感谢。

.test-shadow{
    box-shadow: 0px 5px 15px 3px rgba(0, 0, 0, 0.1);
    width: 40%;
    padding: 40px;
    position: relative;




    position: relative;
    margin: 3em;
    box-sizing: border-box;
}

.test-shadow:before {
    content: "";
display: block;
width: 20px;
height: 20px;
position: absolute;
/*border-top: 20px solid transparent;*/
/*border-right: 15px solid #f7f7f8;*/
left: 0px;
bottom: 0px;
/*box-shadow: 0 2px 25px -2px rgba(0, 0, 0, 0.15);*/
/*background-color: #FFFFFF;*/

border-top: 20px solid transparent;
border-right: 15px solid #06386c;


box-sizing: border-box;
transform: rotate(-180deg);
border: 1em solid black;
border-color: transparent transparent #FFFFFF #FFFFFF;

transform-origin: 0 0;

box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
}

<div class="test-shadow">Lorem ipsum dolor si ametLorem ipsum dolor si ametLorem ipsum dolor si ametLorem ipsum dolor si ametLorem ipsum dolor si ametLorem ipsum dolor si ametLorem ipsum dolor si ametLorem ipsum dolor si amet</div>

Answer 1

请尝试将其分解为两个元素（箭头和文本框），并用包装纸将其包裹起来，以便更轻松地放置整个内容。然后围绕阴影的位置进行操作，直到看起来不错为止，并且不会出现奇怪的重叠。

在我的示例中，我使用了SVG来创建箭头。我给了z-index的{​​{1}}和文本框999的{​​{1}}，所以箭头将位于文本框的顶部，您只需要玩围绕其阴影的位置，尝试匹配文本框的阴影并确保其与右侧的文本框不重叠。

z-index

-999