css制作 平行四边形和梯形导航条

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(-25deg);
        -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; */
            }