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

Question

我有4个方向的提示，用箭头为：after伪元素，像这样： (See JSFiddle)

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

.tooltip div { 
    display:none; 
    color:#000; 
    border: 3px solid rgba(117, 175, 67, 0.4); 
    background:#FFF; 
    padding:15px; 
    width: 250px; 
    z-index: 99; 
} 

.tooltip-right div { 
    left: 180%; 
    top: -80%; 
} 

.tooltip div:after { 
    position:absolute; 
    content: ""; 
    width: 0; 
    height: 0; 
    border-width: 10px; 
    border-style: solid; 
    border-color: #FFFFFF transparent transparent transparent; 
    bottom:-20px; 
} 

.tooltip-right div:after { 
    left:-20px; 
    top:20px; 
    border-color: transparent #FFFFFF transparent transparent;; 
} 

我试图找出如何边境与添加箭头：在伪元素之前，如在这个demo here，但我不能找出如何改变不同元素的箭头方向。任何人都可以提供帮助，或者提供一个带有箭头和边界的多方向工具提示演示的链接？

Answer 1

基本原理是，一旦您使用:after伪元素放置了边界箭头，就会在:before伪元素的顶部放置另一个略小的箭头。

堆叠是用z-index值完成的。

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

对于边框顶部的箭头：

HTML

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

CSS

.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 */ 
} 

我已经完成了后附的箭头（TRBL）（有一些小的意见）。 ..

CODEPEN EXAMPLE