您的位置：首页 > 其它

横向导航栏平行四边形

2015-07-13 17:05 232 查看

最近在网上看了看些美工做的静态网页，然后觉得挺不错的也想实现一下，所以就有了以下的横向导航栏。当时想的太多觉得平行四边形应该用矩形用三角形拼接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{
width:0;
height:0;
border-width: 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{
width: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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

横向导航栏 平行四边形

横向导航栏平行四边形