CSS arrow on tooltip DIV

Question

I'm trying to add a centered arrow/triangle on each side of a rectangular tooltip div and I've tried applying some code from other questions and demos, but none look centered or the arrow's shadow overlaps the div. The arrow should be white with a shadow of 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;
}

Demo: http://codepen.io/ourcore/pen/Lxeapj

Answer 1

Try something like this:

.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>

Inspired by this: https://codepen.io/ryanmcnz/pen/JDLhu

It's a start at least. Hope it helps!