Question

如何在四个边缘上切角？有可能用css做，或者用png图像做得更好吗？

HTML code：

<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 Hibbert。

CSS - 在所有四个边缘上切角

1 个答案: