Trim a small empty triangle on top of a div

css, html

Solution

Live Example: http://jsbin.com/owafod/1/

I used CSS triangle generator to create the triangle.

#Nav { 
  width: 300px;
  height: 200px;
  background: #333;
}

#Triangle {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #ffffff transparent transparent transparent;
    margin: 0 auto;
}

Problem

I'm trying to make a drop down menu, without any images, Pure CSS and HTML like the following: What I'm not able to do is make this little Triangle shaped trim on Top is it possible in CSS, if it is, how?

Original source