一、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);

}