1.平行四邊形 導航條

這個效果看起來不錯吧!

其實實現起來很簡單

平行四邊形的製作運用了CSS 2D變形中的skew( ) 傾斜屬性,因為我們只是在水平方向上傾斜
所以skew( x, y) 中的第二個引數指定為0,否則x,y 方向上都會發生傾斜

    ul li{
        position:relative;
        float:left;
        width:100px;
        height:40px;
        line-height:40px;
        text-align:center;
        margin-right
 
:1px;
    }

    ul li:after{
        content:"";
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        z-index:-1;
        background-color:#2175bc;
        -moz-transform:skewX(-25deg);
        -webkit-transform:skewX(-25deg);
        -o-transform:skewX(-25
 
deg);
        -ms-transform:skewX(-25deg);
        transform:skewX(-25deg);

    }
    ul li:hover:after{
        background-color:skyblue;
    }

利用定位 和 偽元素
這裡注意一下:要給 li:after 的四個方位都是0 ,這樣就能填充整個 li 了, 還有z-index 要給個-1 ,這樣層級在字型的後面 否者會覆蓋字型.

將偽元素和偽類結合使用時,必須要注意的是先偽類,在偽元素ul li:hover:after

2 梯形 使用了CSS3 變形的三個屬性 perspective( ) ,rotateX( ),transform-origin

perspective( ) :用於設定使用者和3D空間z平面的距離,值越小,使用者與3D空間距離越近,視覺月明顯,反之越大,視覺效果越小.
rotateX( ):是3D空間x軸先轉
transform-origin:是用於指定元素的旋轉中心點位置

ul.ul2 li{
                position:relative;
                float:left;
                width:100px;
                height:50px;
                line-height:50px;
                text-align:center;
                margin-right:1px;
            }
            ul.ul2 li a{
            position:relative;
                display:block;
                margin-top:10px;
            }
            ul.ul2 li:after{
                content:"";
                position:absolute;
                left:0;
                right:0;
                top:0;
                bottom:0;
                z-index:-1;
                background-color:#2175bc;
                -moz-transform:perspective(0.5em) rotateX(5deg);
                -webkit-transform:perspective(0.5em) rotateX(5deg);
                -o-transform:perspective(0.5em) rotateX(5deg);
                -ms-transform:perspective(0.5em) rotateX(5deg);
                transform:perspective(0.5em) rotateX(5deg);
                border:1px solid #fff;
                /* -moz-transform-origin:bottom ;
                -webkit-transform-origin:bottom ;
                -o-transform-origin:bottom ;
                -ms-transform-origin:bottom ;
                transform-origin:bottom; */
            }