Html+Css实现梯形选项卡

1，先看一下效果图

2，梯形通过定位和设置Border来实现的，平行四边形通过旋转来实现的。

3，代码如下

（1）HTML代码

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="Style/tab.css" type="text/css" />
    <script type="text/javascript">
        function JumpTab(url)
        {
            window.location.href = url;
        }
    </script>
</head>
<body>
    <div class="topNavigation">
        
        <div class="outDv firstOutDv currentlevel">
            <div class="innerDv currentlevel">
            </div>
            <div class="container currstart">
                合同会签申请
            </div>

        </div>
        <div class="outDv level4" onclick="JumpTab('second.html')">
            <div class="innerDv">
            </div>
            <div class="container next">
                合同盖章记录
            </div>
        </div>
        <div class="outDv level3" onclick="JumpTab('three.html')">
            <div class="innerDv">
            </div>
            <div class="container next">
                合同生效申请
            </div>
        </div>
        <div class="outDv level2" onclick="JumpTab('four.html')">
            <div class="innerDv">
            </div>
            <div class="container next">
                付款50%
            </div>
        </div>
        <div class="outDv level1" onclick="JumpTab('five.html')">
            <div class="innerDv">
            </div>
            <div class="container end">
                合同归档记录
            </div>
        </div>
        <div class="endDv" onclick="JumpTab('six.html')">
            <div class="innerEndDv">相似合同</div>
        </div>
        <div class="endDv" onclick="JumpTab('seven.html')">
            <div class="innerEndDv">
                相关合同
            </div>
        </div>
        
    </div>

</body>
</html>

　　（2）CSS代码

* {
    padding: 0px;
    margin: 0px;
}

.topNavigation {
    
    border-bottom: 5px solid #51A3C9;
    padding-right:10px;
    90%;
    margin:auto;
    padding-top:20px;
}

.firstOutDv {
    margin-left: 0px !important;
}

.outDv {
    border-bottom: 30px solid #b5b5b5;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
     125px;
    position: relative;
    margin-left: -25px;
    display: inline-block;
    margin-bottom: -4px;
    cursor: pointer;
}

.innerDv {
    border-bottom: 28px solid #f2f2f2;
    border-left: 19px solid transparent;
    border-right: 19px solid transparent;
     123px;
    position: absolute;
    left: -18px;
    top: 1px;
    
}

.container {
    z-index: 10;
    position: absolute;
    padding-left: 22px;
    background-position-x: 2px;
    background-position-y: center;
    background-repeat: no-repeat;
    height: 30px;
    line-height: 30px;
}

.start {
    background-image: url('/Images/start.png');
}

.next {
    background-image: url('/Images/next.png');
}

.end {
    background-image: url('/Images/end.png');
}

.currstart {
    background-image: url('/Images/currentstart.png');
    color: #fff;
}

.currnext {
    background-image: url('/Images/currentnext.png');
    color: #fff;
}

.currend {
    background-image: url('/Images/currentend.png');
    color: #fff;
}


.level5 {
    z-index: 5;
}

.level4 {
    z-index: 4;
}

.level3 {
    z-index: 3;
}

.level2 {
    z-index: 2;
}

.level1 {
    z-index: 1;
}

.currentlevel {
    z-index: 6;
    border-bottom: 30px solid #51a3c9;
    top: 0px !important;
}

.endDv {
     100px;
    height: 30px;
    transform: skew(35deg);
    -webkit-transform: skew(35deg);
    -moz-transform: skew(35deg);
    -o-transform: skew(35deg);
    -ms-transform: skew(35deg);
    background-color: #E7E7E7;
    /* margin: 50px auto; */
    display: inline-block;
    margin-bottom: -4px;
    float: right;
    text-align:center;
    margin-left:15px;
    cursor:pointer;
}

.innerEndDv{
    transform: skew(-35deg);
    -webkit-transform: skew(-35deg);
    -moz-transform: skew(-35deg);
    -o-transform: skew(-35deg);
    -ms-transform: skew(-35deg);
    height:30px;
    line-height:30px;
    cursor:pointer;
}
.currentEnd{
    color:#fff;
    background-color:#51A3C9;
}

相关阅读:
CTF-Reverse-[GXYCTF2019]luck_guy
凸度偏差与收益率曲线
 【翻译】理解 LSTM 网络
 基于 Keras 用 LSTM 网络做时间序列预测
 AIMR 固定收益推荐读物
 基于 Keras 用深度学习预测时间序列
 预测美国债券回报
 久期增加会提高长期预期回报吗？
市场收益率预期与远期收益率
 sql server 查询时会锁表吗？
原文地址：https://www.cnblogs.com/wanren/p/7879681.html