3D Menü Ribbon.

Guten Tag,

Ich hoffe das mir hier jemand Helfen kann. Wie kann ich in HTML meine Navigation so machen kann, dass die Ecken so aussehen? http://designreflect.com/wp-co…s/2012/09/CSS-Ribbons.jpg

Mein Body sieht bis jetzt so aus.

<div id="wrapper" class="shadow">
<div id="header"></div>
<div id="navigation" class="shadow-menu">
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="downloads.html">Downloads</a></li>
</ul>
</div>
<div id="content">
<h3>Willkommen auf MappingBaseDE</h3>
Ich wünsche Ihnen viel Spaß auf unserer Seite.
</div>
</div>
<div id="footer">
&copy 2012 Mapping BaseDE. All rights Reserved.
</div>

Danke schon mal für die Hilfe.

//Edit

Der CSS inhalt sieht so aus

body {
background-color: #666;
margin-top: 20px;
font-family: Arial, Helvetica, sans-serif;
}

#wrapper {
margin-left: auto;
margin-right: auto;
width: 930px;
}

#header {
width: 100%;
height: 200px;
background-color: #0F0;
background-image: url(./images/header.png);
}

#footer {
height: 30px;
margin-left: auto;
margin-right: auto;
width: 980px;
margin-top: 50px;
text-align: center;
font-size: 12px;
color: #FFF;
}

#navigation {
width: 970px;
height: 15px;
margin-left: -20px;
color: #FFF;
text-transform: none;
font-weight: 100;
font-family: Trebuchet MS, Helvetica, sans-serif;
text-align: center;
padding-top: 5px;
padding-bottom: 15px;
background: #3198dd; /* Old browsers */
background: -moz-linear-gradient(top, #3198dd 0%, #3198dd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3198dd), color-stop(100%,#3198dd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3198dd 0%,#3198dd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3198dd 0%,#3198dd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3198dd 0%,#3198dd 100%); /* IE10+ */
background: linear-gradient(to bottom, #3198dd 0%,#3198dd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3198dd', endColorstr='#3198dd',GradientType=0 ); /* IE6-9 */
}

#navigation ul li {
list-style-type: none;
}

#navigation ul li a{
height: 15px;
width: 150px;
display: block;
float: left;
text-decoration: none;
color: #FFF;
}

#navigation ul {
margin: 0px;
padding: 0px;
}

#content {
width: 910px;
background-color: #f7f7f7;
margin-bottom: 10px;
padding: 10px 10px 10px 10px;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #1d1d1d 0%, #1d1d1d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(0%,#1d1d1d), color-stop(100%,#1d1d1d)); /*Chrome,Safari4+*/
background: -webkit-linear-gradient(top, #7d7e7d 0%,#1d1d1d 0%,#1d1d1d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7d7e7d 0%,#1d1d1d 0%,#1d1d1d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7d7e7d 0%,#1d1d1d 0%,#1d1d1d 100%); /* IE10+ */
background: linear-gradient(to bottom, #7d7e7d 0%,#1d1d1d 0%,#1d1d1d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#1d1d1d',GradientType=0 ); /* IE6-9 */
}

.shadow {
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}

.shadow-menu {
-webkit-box-shadow: 0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
box-shadow: 0px 0px 5px #000;
}

Ich habe schon in Google nachgeschaut, ich finde aber kein passendes Tutorial was ein Anfänger verstehen könnte.

Ich bräuchte halt nur ein Beispiel oder vllt jemanden der sich Gut damit auskennt, und mir das evtl. machen würde. Habe noch ein Spitzen beispiel gefunden. http://www.net-kit.com/wp-cont…06/pure-css-3d-ribbon.jpg

Es sollte so wie dort sein, nur als Navigation.