Аккуратный небольшой пустой треугольник на вершине DIV

Я пытаюсь сделать выпадающее меню, без каких-либо изображений, Pure CSS и HTML, как следующие: enter image description here Аккуратный небольшой пустой треугольник на вершине DIV

То, что я не в состоянии сделать это сделать эту маленькую треугольную форму на верхней части

это возможно в CSS, если есть, то как?

источник

2013-03-08 ImadBakir

Используйте изображение для того же года. – hjpotter92

Я не хочу использовать изображения, если это можно сделать без использования изображений. – ImadBakir

Живой пример: http://jsbin.com/owafod/1/

Я использовал CSS triangle generator создать треугольник.

#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; 
}

источник

2013-03-08 15:04:45 JSuar

Ничего себе. Большое спасибо, все еще удивляясь коду, задаваясь вопросом, как это делается. – ImadBakir

@sorfect, рад, что я мог бы помочь. – JSuar

Вот решение с границами:

Результат:

enter image description here

HTML:

<div id=a></div><div id=b></div> 
    <div id=c></div>

CSS:

#a { 
    border-right: 5px solid white; 
    border-bottom: 5px solid black; 
    width: 100px; 
    display: inline-block; 
    margin:0; 
} 
#b { 
    border-left: 5px solid white; 
    border-bottom: 5px solid black; 
    width: 100px; 
    display: inline-block; 
    margin:0; 
} 
#c { 
    background: black; height:20px;width:210px 
}

Tests

А вот картина, которая, вероятно, достаточно, чтобы объяснить, как это сделано и как вы можете легко использовать этот вид границы трюк:

enter image description here