Question

我想用指向特定菜单按钮的箭头标记我的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;
}

Answer 1

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

Answer 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

Answer 3

这样的东西？ 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;
}

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

3 个答案: