无法使 div 箭头指向右上角的菜单答案

【问题标题】：Unable to make div arrow pointing to menu at the top right无法使 div 箭头指向右上角的菜单
【发布时间】：2013-04-29 22:39:19
【问题描述】：

我想用指向特定菜单按钮的箭头标记我的 div 内容。我在右上角有一个菜单，我想用箭头指向它的 div 内容。我创建了一个Fiddle。如何在右上角显示我的箭头？

HTML

<p></p>
<span id="pointer"></div>

CSS

body {
    background:#ff004e;
    padding:40px
}
p {
    background:white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width:250px;
    height:150px
}
span#pointer {
    border:solid 10px transparent;
    border-right-color:#fff;
    position:absolute;
    margin:0px 0 0 -20px;
}

【问题讨论】：

你已经用 jQuery 标记了这个问题，但你的小提琴使用的是旧版本的 MooTools。
@Scottie 完全不需要 javascript。设置一些top 和right 值@OP 有什么问题？
@Christoph 就像 facebook 使用指向状态按钮一样，他们显示了一个箭头，从按钮指向 div

标签： jquery html css css-shapes

【解决方案1】：

这样的？ http://jsfiddle.net/Zaukt/1165/

HTML：

<div class="container">

    <div id="pointer"></div>
</div>

CSS：

body {background:#ff004e;padding:40px}

.container {
    background:white; 
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px; 
    width:250px; 
    height:150px;
    display: block;
    position: relative;
}

#pointer{
    border-bottom:solid 10px #FFF;
    border-left: solid 5px transparent;
    border-right: solid 5px transparent;
    position:absolute;
    width: 0;
    height: 0;
    top: -10px;
    right: 20px;
}

【讨论】：

修改border-left和right宽度，可以让箭头变宽
谢谢，你能做得更好吗，箭头和 div 边框上的小阴影

【解决方案2】：

像这样添加到一个 div

<div class="parent">
<p></p>
<span id="pointer"></div>

</div>

定义这个css

.parent{display:inline-block;vertical-align:top;position:relative;}
span#pointer{border:solid 10px transparent;border-right-color:#fff;position:absolute;margin:0;left:-20px;top:17px;}

Left-Demo

Right-Demo

【讨论】：

对不起，您可能对我的问题不清楚。说，我有像“提问”这样的菜单，就像右上角的堆栈溢出一样，当用户点击它时，我需要在它上面显示箭头，即右上角的箭头
抱歉，你的 Right-Demo 在 div 的 Right-height 上，我想在 div 的 Right-width 上（右上角）
就像 facebook 使用指向状态按钮一样，他们会显示一个箭头，从按钮指向 div

【解决方案3】：

this 是你要找的吗？

HTML

<p></p>
<span id="pointer"></span>

CSS

body {
    background:#ff004e;
    padding:40px
}
p {
    background:white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width:250px;
    height:150px
}
span#pointer {
    border:solid 10px transparent;
    border-right-color:#fff;
    position:absolute;
    left: 285px;
    top: 40px;
}

【讨论】：

不，看到这个jsfiddle.net/Zaukt/1，我有像“问问题”这样的菜单，就像右上角的堆栈溢出一样，当用户点击它时，我需要在它上面显示箭头，即箭头右上角
就像 facebook 使用指向状态按钮一样，他们会显示一个箭头，从按钮指向 div