html - CSS - 在所有四个边上切 Angular

Question

如何在所有四个边上切 Angular ？是否可以用 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/作者:约书亚·希伯特。