[转载] Html+Css实现梯形选项卡

最新推荐文章于 2023-09-11 15:45:08 发布

菜鸟猫喵喵

最新推荐文章于 2023-09-11 15:45:08 发布

阅读量668

点赞数

分类专栏：前端文章标签： css html css3

原文链接：https://www.cnblogs.com/wanren/p/7879681.html

版权

前端专栏收录该内容

2 篇文章

订阅专栏

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;
}