with css3, is it possible to make a tab-arrow pointing downward?

(I achieve double border color in the box that this triangle will come out of by doing two divs)

this method is using the one described by Jon Rohan (linked already by @RP.) to make triangles from border styles and a 0x0 sized block element (div's in this case)

example jsfiddle

I included additional divs for the inner white border, could be removed if you're trying to minimize the HTML elements

HTML:

<div id="div1">
    <div id="div2">
        <div id="div3">
            Howdy!
            <div id="tabarrowShadow"></div>
            <div id="tabarrow"></div>
            <div id="tabarrowInner"></div>
            <div id="tabarrowInner2"></div>
        </div>
    </div>
</div>

CSS:

body {font-family:Helvetica,Arial,sans-serif;}
#div1 {border:solid 1px #ddd;padding:2px;background-color:#ebebeb;position:relative;}
#div2 {border:solid 1px #ddd;}
#div3 {border:solid 1px #f7f7f7;padding:25px;height:20px;}
#tabarrow {width:0;height:0;position:absolute;top:75px;left:20px;
    border-color:#ddd transparent transparent transparent;
    border-style:solid;
    border-width:15px;
}
#tabarrowInner {width:0;height:0;position:absolute;top:75px;left:22px;
    border-color:#f7f7f7 transparent transparent transparent;
    border-style:solid;
    border-width:13px;
}
#tabarrowInner2 {width:0;height:0;position:absolute;top:74px;left:23px;
    border-color:#eee transparent transparent transparent;
    border-style:solid;
    border-width:12px;
}
#tabarrowShadow {width:1px;height:1px;box-shadow:0 0 10px 1px #000;position:absolute;top:86px;left:35px}

This can be achieved by creating an empty div and giving it a width of 0, and placing a border of desired thickness to the opposite side you want the triangle to point.

You can then position it where you wish.

See http://jonrohan.me/guide/css/creating-triangles-in-css/ for instructions.