jquery - 右上のメニューを指す div 矢印を作成できません

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

このようなもの？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;
}

Answer 2

このように1つの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;}

左デモ

右デモ

Answer 3

これはあなたが探しているものですか？

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