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

is it possible to create a triangle like what is pictured? even with开发者_开发技巧 the double border color?

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