最近在网上看了看些美工做的静态网页，然后觉得挺不错的也想实现一下，所以就有了以下的横向导航栏。当时想的太多觉得平行四边形应该用矩形用三角形拼接border-top、border-bottom：none,，或者直接截图翻转，结果想到最后发现都挺麻烦的，以下代码仅供参考。我是直接使用的//实现的。
效果图如下：
代码：
<style>
h1{
font-size: 30px;
color:white;
font-weight: 300;
display: inline-block;
margin-right:3%;
margin-left: 3%;
margin-top: 0px;
}
h1 a{
text-decoration: none;
color:red;
font-size:13px ;
position: relative;
}
.chiefs{
float:left;
}
h1 a:hover .chiefs{
0;
height:0;
border- 25px;
float: left;
border-style:solid;
border-color:transparent brown transparent transparent;
transform:rotate(45deg);
float: left;
margin-top: -30px;
margin-left: 20px;
opacity: .4;
position: absolute;
top:-10px;
left:-50px;
}
.box{
80%;
height:40px;
background: tan;
margin:0 auto;
}
</style>
</head>
<body style="background: #262626;">
<div class="box">
<h1>/<a href=""><div class="chiefs"></div>apple1</a>/</h1>
<h1>/<a href=""><div class="chiefs"></div>apple2</a>/</h1>
<h1>/<a href=""><div class="chiefs"></div>apple3</a>/</h1>
<h1>/<a href=""><div class="chiefs"></div>apple4</a>/</h1>
<h1>/<a href=""><div class="chiefs"></div>apple5</a>/</h1>
<h1>/<a href=""><div class="chiefs"></div>apple6</a>/</h1>
<h1>/<a href=""><div class="chiefs"></div>apple7</a>/</h1>
</div>
</body>