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

我认为你在谈论聊天气泡中的三角形，这在很多应用中非常频繁......这是我认为你感兴趣的小提琴link .. 我刚把它添加到你的CSS中：

 #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 content和after属性来完成的...您可以从site获取更多信息......

Answer 2

Mr.Kelly，

在css中添加代码（#hover）

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

点击此链接http://jsfiddle.net/hRMgk/18/

祝你好运！

为div的所有边添加指针箭头类

2 个答案: