html 倾斜导航栏实现

作者: clannadyang | 来源:发表于2020-09-24 11:00 被阅读0次

<!DOCTYPE html>
<html>
  <head>
    <style>
        .tab {
            background:#eaeaea;
        }
        .tab li{
            list-style: none;
            float:left;
            padding:10px;
            margin-left:5px;
            position:relative;
            color:white;
            z-index:0;
        }
        .tab::after{
            content:"";
            display:block;
            height:0;
            clear:both;
            visibility:hidden;
        }
        .tab ul::after{
            content:"";
            display:block;
            height:0;
            clear:both;
            visibility:hidden;
        }
        .tab li::after{
            border-radius: 3px;
            content:'';
            position:absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            z-index: -1;
            background-color: #09818D;
            transform:skewX(-25deg);
        }
        .tab li:hover{
             cursor: pointer;
        }
        .tab li:hover::after{
            background-color:#58CAD0 ;
        }
    </style>
  </head>
  <body>
    <ul class="tab">
     <li>baidu</li>
     <li>baidu</li>
     <li>baidu</li>
    </ul>
    <div class="content">content</div>
  </body>
</html>