Question

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 border.

Answer 1

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();

})