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

css, popover

Solution

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

Problem

I am trying to make a popover with an error, but I am having trouble making the arrow appear above the border of the div I am attaching it to. I would appreciate any help. This is what I have so far... This is the CSS code I am using, but cant get it to work: 1.DIV for the entire popover: ``` <div class="info-popover"> <div class="inner"></div> <div class="arrow"></div> </div> ``` 2.CSS for 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; } ```

Original source