css两边翘起效果

admin

利用css实现DIV两边翘起效果

css如下；
[pre]
.box1 li{
    width: 328px;
    height: 129px;
    position: relative;
    background: #fff;
    float: left;
    margin: 20px 10px;
    border: 2px solid #f5f5f5;
        list-style:none;

                }
               
.box1 li:before{
    content:"";
    position:absolute;
    width:90%;
    height: 80%;
    bottom: 13px;
    left:21px;
    background: transparent;
    z-index: -2;
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
    -o-box-shadow: 0 8px 10px rgba(0,0,0,0.8);
    -moz-box-shadow: 0 20px 20px rgba(0,0,0,0.8);
    transform:skew(-12deg) rotate(-6deg);
    -webkit-transform:skew(-12deg) rotate(-6deg);
    -moz-transform:skew(-12deg) rotate(-6deg);
    -os-transform:skew(-12deg) rotate(-6deg);
    -o-transform:skew(-12deg) rotate(-6deg);
}

.box1 li:after{
    content:"";
    position:absolute;
    width:90%;
    height: 80%;
    bottom: 13px;
    right:21px;
    z-index: -2;
    background: transparent;
    box-shadow: 0 8px 10px rgba(0,0,0,0.6);
    transform:skew(12deg) rotate(6deg);
    -webkit-transform:skew(12deg) rotate(6deg);
    -moz-transform:skew(12deg) rotate(6deg);
    -os-transform:skew(12deg) rotate(6deg);
    -o-transform:skew(12deg) rotate(6deg);
}

[/pre]
调用：
[pre]
<div class="boxtp"><h1>bbskali.cn</h1></div>
[/pre]