CSS arrow на подсказке DIV

Question

Я пытаюсь добавить центрированную стрелку/треугольник с каждой стороны прямоугольной подсказки div, и я попытался применить какой-то код из других вопросов и демонстраций, но ни один из них не выглядит центрированным или не перекрывается тень стрелки div. Стрелка должна быть белой с тенью 0 0 20px 0 rgba(0, 0, 0, 0.2);.

HTML:

<div class="tooltip cal-tooltip"> 
<div class="tooltip cal-tooltip"> 
    <div class="cal-tooltip-cont"> 
    <div class="cal-tooltip-img four-three-img"> 
     <img src="http://placeholdit.imgix.net/~text?txtsize=75&txt=Event%20Photo&w=600&h=400" /> 
    </div> 
    <div class="card-info"> 
     <h2>Wrapping related content title</h2> 
     <h3>Event date</h3> 
     <h3>Event venue</h3> 
    </div> 
    </div> 
</div> 

CSS:

.tooltip { 
    position: absolute; 
    top: 0; 
    z-index: 1; 
    background-color: white; 
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2); 
} 
.tooltip > div { 
    padding: 15px; 
} 
.tooltip > div img { 
    display: block; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
} 

.cal-tooltip { 
    width: 20em; 
    cursor: auto; 
} 
.cal-tooltip .cal-tooltip-cont { 
    display: flex; 
} 
.cal-tooltip .cal-tooltip-cont > div { 
    flex-basis: 50%; 
} 
.cal-tooltip .cal-tooltip-cont > div:nth-child(1) { 
    padding-right: 5px; 
} 
.cal-tooltip .cal-tooltip-cont > div:nth-child(2) { 
    padding-left: 5px; 
} 
.cal-tooltip .cal-tooltip-cont > div h2 { 
    padding-bottom: 5px; 
    font-size: 1em; 
} 
.cal-tooltip .cal-tooltip-cont > div h3 { 
    font-size: .85em; 
} 

Демо: http://codepen.io/ourcore/pen/Lxeapj

Answer 1

Попробуйте что-то вроде этого:

.tooltip { 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 60px; 
 
    z-index: 1; 
 
    background-color: #fff; 
 
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2); 
 
    width: 17em; 
 
    padding: 15px; 
 
} 
 

 
.tooltip:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
    margin-left: -1em; 
 
    margin-top: -1em; 
 
    left: 100%; /* change to 0% for left arrow */ 
 
    top: 50%; 
 
    box-sizing: border-box; 
 
    border: 1em solid black; 
 
    border-color: transparent transparent #fff #fff; 
 
    transform-origin: 50% 50%; 
 
    transform: rotate(-135deg); /* change to 45 deg for left arrow */ 
 
    box-shadow: -5px 5px 10px 0 rgba(0, 0, 0, 0.1); 
 
} 
 

 
.card { 
 
    display: flex; 
 
} 
 

 
.card img { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; 
 
} 
 

 
.card > div { 
 
    flex-basis: 50%; 
 
} 
 

 
.card-info { 
 
    padding-left: 15px; 
 
}

<div class="tooltip"> 
 
    <div class="card"> 
 
    <div class="card-image"> 
 
     <img src="http://placeholdit.imgix.net/~text?txtsize=75&txt=Event%20Photo&w=600&h=400" /> 
 
    </div> 
 
    <div class="card-info"> 
 
     <h2>Test title</h2> 
 
     <h3>Event date</h3> 
 
     <h3>Event venue</h3> 
 
    </div> 
 
    </div> 
 
</div>

Вдохновленный этим: https://codepen.io/ryanmcnz/pen/JDLhu

Это начало, по крайней мере. Надеюсь, поможет!