CSS：如何将箭头附加到 div 并使其与边框重叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17598465/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: How to attach an arrow to a div and make it overlap the border
提问by Andre S
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.
我试图制作一个有错误的弹出框，但我无法让箭头出现在我附加到的 div 的边框上方。我将不胜感激任何帮助。
This is what I have so far...
这是我到目前为止...
This is the CSS code I am using, but cant get it to work:
这是我正在使用的 CSS 代码，但无法使其正常工作：
1.DIV for the entire popover:
1.DIV 用于整个弹出框：
<div class="info-popover">
<div class="inner"></div>
<div class="arrow"></div>
</div>
2.CSS for each:
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;
}
回答by Andrew Clody
CSS solution:
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;
}
回答by Ronnel Martinez
Easiest way:
最简单的方法：
HTML:
HTML：
<div class="meow">
</div>
CSS:
CSS：
.meow {
height: 100px;
width: 300px;
margin: 30px;
background: linear-gradient(#333, #222);
-o-border-radius: 4px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.meow:after {
content: " ";
border-top: 11px solid #222;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
position: relative;
top: 111px;
right: -140px;
}
Live preview: CodePen.io
实时预览：CodePen.io
Just do some few edits.
只需做一些编辑。
回答by Santiago Baigorria
Try this:
尝试这个：
HTML
HTML
<div class="info-popover">
<div class="inner"></div>
<p class="arrow"></p>
</div>
CSS
CSS
.info-popover {
position: relative;
/* any other CSS */
}
.arrow {
background: url("/images/dock/popover-arrow.png") no-repeat 0 0;
height: 15px;
width: 20px; /* width of arrow image? */
display: block;
position: absolute;
bottom: -15px;
left: 0; margin: 0 auto; right: 0; /* to center the arrow */
}
