css导航样式平行四边形和css的X样式

一、css导航样式平行四边形

效果图如下：

代码：

css如下：

.menu {

        margin: 0 auto;

        display: inline-block;

        float: right;

    }

    .meun-item{

                position: relative;

        display: inline-block;

        border: 0;

        background: transparent;

        width: 140px;

        margin-right: 10px;

        padding: 0.7rem 0rem;

        text-align: center;

        color: white;

        text-transform: uppercase;

        text-decoration: none;

        font: 18px/1 MicrosoftYaHei;

        cursor: pointer;

        z-index: 10;

    }

    a:focus {

        outline: none;

    }

    .menu a:link,.menu a:visited, .menu a:hover, .menu a:active {

        text-decoration: none

    }

    .menu>.meun-item::before,.menu>.meun-item:first-child::after,.menu>.meun-item:last-child::before{

                content: '';

        position: absolute;

        top: 0;

        right: 0;

        bottom: 0;

        left: 0;

        z-index: -1;

        background: #373D4C;

        transform: skew(-25deg);

    }

    .menu>.meun-item:last-child::after {

        content: '';

        position: absolute;

        top: 0;

        bottom: 0;

        left: 20px;

        right: -11px;

        z-index: -1;

        background: #373D4C;

    }

    .meun-item:hover::before,

    .menu>.meun-item:last-child:hover::before,

    .menu>.meun-item:first-child:hover::after,

    .menu>.meun-item:first-child:hover::before,

    .menu>.meun-item:last-child:hover::after {

        background: #1C86EE;

    }

html代码如下：

具体可在这里查看：平行四边形导航样式

二、css的X样式

样式如下：

.closediv{

    width: 50px;

    height: 50px;

    background: #2A303B;

    line-height: 50px;

    text-align: center;

    position: absolute;

    right: 0px;

    top: 0px;

    color:#FFF;

    cursor: pointer;

    padding: 10px;

}

    .close{

    display: inline-block;

    width:30px;

    height:30px;

    overflow: hidden;

    position: relative;

}

.close::before,.close::after{

    content:"";

    position: absolute;

    top:50%;

    left:0;

    margin-top: -1px;

    background-color: #FFF;

    width:100%;

    height:3px;

}

.close::before{

    transform: rotate(45deg);

    -webkit-transform: rotate(45deg);

    -moz-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    -o-transform: rotate(45deg);

}

.close::after{

    transform: rotate(-45deg);

    -webkit-transform: rotate(-45deg);

    -moz-transform: rotate(-45deg);

    -ms-transform: rotate(-45deg);

    -o-transform: rotate(-45deg);

}

html代码如下：

具体可在这里查看：关闭样式

欢迎讨论，不吝赐教。。。