0

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

3 回答 3

0

这是要找的吗?

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;
}
于 2013-05-06T07:52:20.770 回答
0

像这样的东西?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;
}
于 2013-05-06T08:12:56.690 回答
0

像这样添加到一个 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;}

左演示

右演示

于 2013-05-06T07:54:26.117 回答