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

【问题标题】：CSS: How to attach an arrow to a div and make it overlap the borderCSS：如何将箭头附加到 div 并使其与边框重叠
【发布时间】：2013-07-10 00:36:19
【问题描述】：

我正在尝试制作一个有错误的弹出框，但我无法让箭头出现在我要附加到的 div 的边框上方。我将不胜感激。

这就是我目前所拥有的......

这是我正在使用的 CSS 代码，但无法正常工作：

1.DIV 表示整个弹出框：

<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 popover

【解决方案1】：

试试这个：

HTML

<div class="info-popover">
    <div class="inner"></div>
    <p class="arrow"></p>
</div>

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 */
}

【讨论】：

【解决方案2】：

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;
}

【讨论】：

我正要建议，因为这比使用图像更像 CSS3（因为您标记了问题 CSS3）。但是，我更愿意坚持这个问题，因为每次我提出不同的建议时，我的回答都会得到否定票......
确实，我认为自从 CSS3 被标记后，这回答了“CSS：如何将箭头附加到 div 并使其与边框重叠”这将是解决此问题的好方法。跨度>
这是一个更好的方法。也许，桑茨，我应该说“对此或更好的解决方案的任何帮助表示赞赏”。我想我下次可以这样做。我希望我也能接受您的回答，因为我将在为 ie7 创建 css 文件时使用该解决方案，因为它不支持这些 css3 伪元素......我赞成您的回答。感谢您的努力。这个解决方案非常适合......

【解决方案3】：

最简单的方法：

HTML：

<div class="meow">
</div>

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;
}

实时预览：CodePen.io

只需进行一些编辑。

【讨论】：