CSS design question - adding a small background-image for div in a specific position

To clarify, I made the following diagram:

Basically I have a bordered div, which is clickable. After clicking it, I want to (through javascript) create a new div which has a protruding arrow shaped border into the clicked div.

Any ideas as to how I would create such a border? I'm not worried about the javascript. Just how to actually create such a bor开发者_JS百科der.

You can use the CSS Triangle approach (Lots of examples online, here's one from CSS Tricks), where you have an empty div inside your tooltip that uses some clever border manipulation to make the angle. Just position the div, and you're done!

I tried to make it as close to your drawing beautiful diagram as possible, but I wasn't quite able to get the arrow's hrm... unique angle.

http://jsfiddle.net/WJtnM/

HTML

<div id="b"> <span class="g">BEFORE CLICK</span>&nbsp; 
    <div id="f"> AFTER CLICK </div>
    <div class="c" id="d"></div>
    <div class="c" id="e"></div>
</div>

CSS

#b
{
    position:relative;
    padding:28px 20px 12px 60px;
    width:170px;
    border:1px solid black;
}
.c
{
    position:absolute;
    bottom:100%;
    right:30px;

    width:0px;
    height:0px;
    border: 20px solid transparent;
}
.c#d
{
    border-bottom-color: black;
}
.c#e
{
    border-bottom-color: white;
    margin-bottom: -1px;
}

#f
{
    position:absolute;
    padding:35px 20px 12px 60px;
    width:170px;
    border:1px solid black;
    border-bottom-width: 0px;
    bottom:100%;
    left:-1px;
}

jQuery

$("#b").click(function(){

    $(".c,#f,.g").toggle();

})

Check out the below example, after clicking the link either you append the "after-click-div" or show it. The arrow div is positioned with negative margin over the border.

<div class="container">
  <a href="#">Link</a>
  <div id="after-click-div" style="border: 1px solid #000; position: relative;">
    <div class="arrow" style="background: #fff url(arrow.gif) no-repeat; position: absolute; top: -10px; right: 10px; width: 10px; height: 10px"></div>
   content
  </div>
</div>

Or you can save an image like this ______^_ and assign it as a background image to the after_click_div like background: url(arrow.gif) no-repeat top right

The arrow border have to be an image and it have to take a z-index.