CSS - 在所有四條邊上切割角落

Question

如何在所有四條邊上切割邊角？是否可以用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 }​ 

Code (JSFidle link)

Answer 1

也許你正在尋找呢？ - http://playground.genelocklin.com/tucked-corners/。

這可以使用具有僞:after和:before類的單個元素來實現。

HTML - <div class="tucked-corners"></div>​

CSS -

.tucked-corners { 
background-size: cover; 
box-shadow: inset 0 0 0 .1em hsla(0,0%,0%,.1), 
      0 .1em .25em hsla(0,0%,0%,.25); 
margin: 0 auto; 
padding-bottom: 100%; 
position: relative; 
} 

.tucked-corners:after, .tucked-corners:before { 
box-shadow: inset 0 1em .25em -1em hsla(0,0%,0%,.5), 
      inset 0 -1em .25em -1em hsla(0,0%,0%,.5), 
      0 3em 0 -.1em #f6f6f6, 
      0 -3em 0 -.1em #f6f6f6; 
content: ''; 
height: 130%; 
left: 50%; 
margin: -15% -10%; 
position: absolute; 
top: 0%; 
width: 20%; 
-webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
     transform: rotate(45deg); 
} 

.tucked-corners:before { 
-webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
     transform: rotate(-45deg); 
} ​ 

的jsfiddle演示 - http://jsfiddle.net/joshnh/kWRjF/由Joshua希伯特。