Html 如何向多方向箭头工具提示添加边框？

我有四个方向的工具提示，箭头作为：后面的伪元素，如下所示：

---

我试图解决如何使用伪元素：before向箭头添加边框的问题，如图所示，但我无法解决如何为不同的元素更改箭头方向的问题。有人可以提供帮助，或者提供指向带有箭头和边框的多向工具提示演示的链接吗

基本原理是，一旦您使用

：伪元素之后放置了边框箭头，您将另一个稍小的箭头放置在
：伪元素之前的顶部

堆叠使用z索引值完成

每个箭头都需要使用绝对值（以及一些负边距）进行定位，这取决于它应该位于的位置

对于带边框的顶部箭头：

HTML

我已经完成了附件中的箭头（TRBL）（带有一些小注释）

评论对于了解正在发生的事情非常有用，我非常欣赏它的彻底性。谢谢
 <div class="background">
 <div class="tooltip tooltip-right">
     <i>i</i>
     <div><h4>Achtung!</h4>
         <p>Here is the info for section one</p></div> 
 </div>

<div class="tooltip top">
  <p>Tooltip Text</p>
</div>

.tooltip {
  display:inline-block;
  vertical-align:top;
  height:50px;
  line-height:50px; /* as per div height */
  margin:25px;
  border:2px solid grey;
  width:250px;
  text-align:center;
  position:relative; /* positioning context */
}
.tooltip:before,
.tooltip:after { /*applies to all arrows */
  position:absolute;
  content:"";
}

.tooltip:after {
  /* the is going to be the extra border */
  border:12px solid transparent;
}

.tooltip:before {
 /* the is going to be the inside of the arrow */
  border:10px solid transparent; /* less than outside */ 
}

/* Lets do the top arrow first */

.top:after {
  /* positioning */
  left:50%;
  margin-left:-6px; /* 50% of border */
  top:-24px; /* 2x border */
  border-bottom-color:grey; /* as div border */
 }


.top:before {
  /* positioning */
  left:50%;
  margin-left:-5px; /* 50% of border */
  top:-20px; /* 2x border */
  border-bottom-color:white; /* as div background */
  z-index:5; /* put it on top */
}