如何爲多方向箭頭工具提示添加邊框？

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