一、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代码如下：
具体可在这里查看：关闭样式
欢迎讨论，不吝赐教。。。
