Как применить тень треугольника со стрелкой

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 из 999, а текстовое поле z-index из -999, поэтому стрелка будет сверху текстового поля, и вам нужно будет только поиграть с положением его тени, пытаясь сопоставить тень текстового поля и убедиться, что она не перекрывает текстовое поле с правой стороны.

body {
    background: FloralWhite;
}

.text-container {
    margin: 3em;
}

.test-shadow {
    float: left;
    z-index: -999;
    box-shadow: 0px 5px 15px 3px rgba(0, 0, 0, 0.1);
    width: 80%;
    padding: 40px;
    position: relative;
    box-sizing: border-box;
    background: white;
}

.svg-arrow {
    float: left;
    z-index: 999;
    margin-top: 20px;
    height: 30px;
    -webkit-filter: drop-shadow( -7px 4px 4px rgba(0, 0, 0, 0.07));
            filter: drop-shadow( -7px 4px 4px rgba(0, 0, 0, 0.07));
}

.svg-arrow polygon{
    fill: white;
}

<div class="text-container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-arrow" viewBox="0 0 20 20">
        <polygon points="0,0 20,0 20,20"></polygon>
    </svg>
    <div class="test-shadow">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget tristique felis, vitae pretium sem.</div>
</div>