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