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;
    width: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;
    width: 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;
    width: 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 {
    width: 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;
}

　　

posted @ 2017-11-22 16:05  美酒与歌  阅读(3241)  评论(2)  编辑  收藏  举报