為以div為中心的所有側面添加指針箭頭類

Question

我想將箭頭添加到div中，就像在工具提示上看到的一樣，我需要將單獨的類添加到主div中，然后再將其放在div的中心，即左，右，頂部或底部。

無論div的寬度/高度如何，我都需要使箭頭居中。

這是我到目前為止的內容： http : //jsfiddle.net/hRMgk/1/

完整的CSS，HTML和jQuery

<div id="theHover" class="therequest">
 <div class="noprint">
    <button  id="closetheHover">Close Window</button>
 </div>
        You need to start here on the website.
</div>

Answer 1

我認為您是在談論聊天氣泡中的三角形，在許多應用程序中這些三角形非常常見。這是我認為您感興趣的小提琴鏈接 。

 #theHover.arrow::before
 {
content:'';
position:absolute;
left:50%;
top:100%;
border:12px solid black;
border-color:Blue transparent transparent transparent;
}
#theHover.arrow::after{
content:'';
position:absolute;
left:51%;
top:100%;
border:10px solid black;
 border-color:white transparent transparent transparent; 
}

基本上，這是通過在CSS中使用before內容和after內容屬性來完成的...您可以從此站點獲取更多信息...

Answer 2

凱利先生，

在CSS中添加代碼（#hover）

    text-align:center;
    margin-top:auto;
    margin-bottom:auto;

檢查此鏈接http://jsfiddle.net/hRMgk/18/

祝好運 ！