html - CSS - 4 つのエッジすべてでコーナーをカット

Question

4 つのエッジすべてのコーナーをカットするにはどうすればよいですか? cssでそれを行うことは可能ですか、それともpng画像で行う方が良いですか?

HTML コード:

<nav class="meni container grid_3 omega">
               <ul>
                   <a href="#"><li role=pocetna>Početna</li></a>
                   <a href="galerija.html" role=galerija class="meni_aktivan_link"><li>Galerija</li></a>
                   <a href="#" role=projekti><li>Projekti</li></a>
                   <a href="#" role=nama><li>O nama</li></a>
                   <a href="#" role=kontakt><li>Kontakt</li></a>
               </ul>
           </nav>​

CSS:

.meni {margin: 93px 0 0 0; text-align: left;background: gray; text-transform: uppercase;position: relative;}
.meni ul {padding: 0; margin: 0; }
.meni li {padding: 2px 0;color: black !important; padding:0 26px; }
.meni li[role=pocetna]:hover {background:#336699 !important }​

コード (JSFidle リンク)

Answer 1