我正在尝试使用错误制作一个弹出框,但是我无法使箭头出现在我附加到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解决方案:
.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; }