CSS:如何将箭头附加到div并使其与边框重叠 [英] CSS: How to attach an arrow to a div and make it overlap the border
本文介绍了CSS:如何将箭头附加到div并使其与边框重叠的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想让一个popover有错误,但我有困难,使箭头出现在我附加的div的边框之上。
I am trying to make a popover with an error, but I am having trouble making the arrow appear above the border of the div I am attaching it to. I would appreciate any help.
这是我到目前为止...
This is what I have so far...
这是CSS代码我使用,但无法让它工作:
This is the CSS code I am using, but cant get it to work:
1.DIV为整个popover:
1.DIV for the entire popover:
<div class="info-popover">
<div class="inner"></div>
<div class="arrow"></div>
</div>
2.CSS每个:
.info-popover {
height: 250px;
margin-top: -255px;
position: absolute;
width: 400px;
}
.info-popover .inner {
background-color: #FFFFFF;
border: 1px solid #003366;
border-radius: 10px 10px 10px 10px;
height: 240px;
margin-top: 0;
width: 100%;
}
.info-popover .arrow {
background: url("/images/dock/popover-arrow.png") no-repeat scroll center -5px transparent;
height: 15px;
position: relative;
width: 100%;
z-index: 999;
}
推荐答案
CSS解决方案:
.bubble
{
position: relative;
width: 400px;
height: 250px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bubble:after
{
content: "";
position: absolute;
bottom: -25px;
left: 175px;
border-style: solid;
border-width: 25px 25px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}
.bubble:before
{
content: "";
position: absolute;
top: 250px;
left: 174px;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 0;
}
这篇关于CSS:如何将箭头附加到div并使其与边框重叠的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文