CSS: Transparent pointer like the one on the App Store - html

Question

Maybe I'm stupid atm, but I can't figure out how to do this:
http://s24.postimg.org/k9fl1y2s5/arrow.png
As you can see, the pointer/arrow inside the nav-element is transparent, but shows the content instead of it's parent, the nav-element.
This is my HTML:
<nav>
...
<div id="pointer></div> <!-- this is the arrow -->
</nav>
<div id="content">...</div>
How can I achieve that? Ugh, hope you understand what I mean... :)

Answer 1

Ok it took some doing but I think I have a start for you:
http://jsfiddle.net/uLDzA/2/
The main problem here is that you can't just set the ARROW to transparent as the menu div will have some sort of solid color that won't let the transparent bleed through to the main background.
I solved this by busting up the menu item into a top and bottom section. The top has text and the bottom is constructed so that we "emulate" a triangle in the middle section and give it a transparent background.
Basically build the arrow into the menu item itself by piecing it together like a CSS puzzle.
<div class="con">
<div class="item">
<div class="item_top">
top
</div>
<div class="item_btm">
<div class="item_btm_lft"> </div>
<div class="item_btm_ptr"> </div>
<div class="item_btm_rgt"> </div>
</div>
</div>
</div>
.con {
width:100px;
height:40px;
padding:20px;
background:url('http://placekitten.com/g/100/100');
}
.item {
width:100px;
background:transparent;
}
.item_top {
background:orange;
text-align:center;
color:#fff
}
.item_btm {
width:100%;
overflow:hidden;
}
.item_btm_lft {
width:40px;
float:left;
background:orange;
border-bottom:2px solid orange;
}
.item_btm_ptr {
width: 0px;
height: 0px;
float:left;
border-style: solid;
border-width: 0 10px 20px 10px;
border-color: transparent orange transparent orange;
}
.item_btm_rgt {
width:40px;
float:left;
background:orange;
border-bottom:2px solid orange;
}

Answer 2

Well, not sure if i got you right but:
I am pretty sure that the pointer/arrow is a seperate img file that is loaded and shown in cases like: mouse-over, active (e.g).
That means, that you creat a new .png File make the background transparent and draw it as you want. All areas where you didn t draw on are transparent.
Let's make it a little easier to understand:
Your navigation is not active nor is your mouse hovering over it. Then you should see the standard loaded img (without the pointer/arrow).
--> we hover our mouse over it or click it:
Your navigation is active now and the new image (e.g. .png file) is shown instead of the old one. This image is drawn with some areas untouched so they are transparent.

Answer 3

You are looking at a modern application of CSS3 techniques as demonstrated by:
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
In your example, the border colors have been made semi-transparent using rgba to specify the color.
However, the reference will not tell you how to build exactly what your screen shot is showing. It will only explain how to create the triangle motif.