CSS:如何将箭头附加到div并使其与边框重叠

前端之家收集整理的这篇文章主要介绍了CSS:如何将箭头附加到div并使其与边框重叠前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试使用错误制作一个弹出框,但是我无法使箭头出现在我附加到div的边框上方.我将不胜感激任何帮助.

这就是我到目前为止……

这是我正在使用的CSS代码,但无法使其工作:

1.DIV为整个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解决方案:

http://jsfiddle.net/wn7JN/

.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;
}
原文链接:https://www.f2er.com/css/217840.html

猜你在找的CSS相关文章