css3 - CSS: How to attach an arrow to a div and make it overlap the border -

i trying make popover error, having trouble making arrow appear above border of div attaching to. appreciate help.

this have far...

this css code using, cant work:

1.div entire popover:

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

2.css each:

.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 solution:

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