CSS 平行四边形导航菜单
分类：实例代码
CSS 平行四边形导航菜单属于前端实例代码，有关更多实例代码大家可以查看。
分享一段代码实例，它利用css实现了平行四边形效果。
代码实例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #00868B;
}
.main {
width: 90%;
margin: 0 auto;
margin-top: 50px;
}
.meun-button,
.first-button,
.last-button {
position: relative;
display: inline-block;
border: 0;
background: transparent;
width: 12%;
margin-right: 1%;
padding: 0.5em 0em;
text-align: center;
color: white;
text-transform: uppercase;
text-decoration: none;
font: bold 150%/1 sans-serif;
cursor: pointer;
}
.meun-button::before,
.first-button::after,
.last-button::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: #473C8B;
transform: skew(-25deg);
}
.last-button::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 20px;
right: -11px;
z-index: -1;
background: #473C8B;
}
.first-button::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -11px;
right: 20px;
z-index: -1;
background: #473C8B;
}
.meun-button:hover::before,
.last-button:hover::before,
.first-button:hover::after,
.first-button:hover::before,
.last-button:hover::after {
background: #1C86EE;
}
</style>
</head>
<body>
<div class="main">
<a class="first-button">1</a>
<a class="meun-button">2</a>
<a class="meun-button">3</a>
<a class="meun-button">4</a>
<a class="meun-button">5</a>
<a class="meun-button">6</a>
<a class="last-button">7</a>
</div>
</body>
</html>
CSS 平行四边形导航菜单，这样的场景在实际项目中还是用的比较多的，关于CSS 平行四边形导航菜单就介绍到这了。