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;

}

　　

Html+Css实现梯形选项卡的更多相关文章

  1. 纯CSS实现tab选项卡切换

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

  2. 用html+css+js实现选项卡切换效果

    文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...

  3. [前端] html+css+javascript 实现选项卡切换效果

    用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...

  4. 各种demo：css实现三角形，css大小梯形，svg使用

    各种demo: 1.css实现正方形 思路:width为0:height为0:使用boder-width为正方形的边长的一半,不占任何字节:border-style为固体:border-color为正 ...

  5. css实现梯形标签页

    html <nav>click me</nav> css nav{ position: relative; display: inline-block; padding: 15 ...

  6. 前端（各种demo）一：css实现三角形，css实现梯形，pop弹层，css伪类before，after使用，svg使用（持续更新中）

    各种demo: 1.css实现正方形 思路:width为0:height为0:使用boder-width为正方形的边长的一半,不占任何字节:border-style为固体:border-color为正 ...

  7. Div+CSS+JQuery实现选项卡，即通过点击不同的li跳转到不同的div中显示不同的内容或者执行不同的操作。

    1.代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>   ...

  8. css 简单梯形

    通过css2D变形我们可以轻松得到平行四边形,那么通过此技巧可以得到梯形吗? no! 不过我们可以通过3D旋转得到类似这样的效果: transform:perspective(0.5em)  rota ...

  9. 【CSS】梯形、平行四边形导航条与毛玻璃效果【转】

    转载出处:http://www.cnblogs.com/Uncle-Keith/p/5943158.html 代码部分有小改动. 导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生 ...

随机推荐

  1. Angular7 Drag and Drop

    完整代码在最后,下面讲解以此代码为例 1.环境配置 1.1 安装@angular/material.@angular/cdk cnpm install --save @angular/material ...

  2. angular2.0入门---webStorm创建angular CLI项目

    创建项目之前需要先安装angular cli,(angular是用typescript编写的,所以先安装typescript,再安装angularjs-cli).打开命令窗口输入 npm instal ...

  3. apply与call简单用法以及判断数组的坑

    1 typeof 和 instanceof var array = [];平时如果判断一个对象是否为数组,可能你会用 typeof array,但是输出为“object”. typeof 一般只能返回 ...

  4. Keras vs. PyTorch in Transfer Learning

    We perform image classification, one of the computer vision tasks deep learning shines at. As traini ...

  5. gearman入门初步

    原文地址:http://blog.sina.com.cn/s/blog_5f54f0be0101btsi.html     PHP 没有提供直接的并发功能.要实现并发,必须: function asy ...

  6. 在线制作GIF图片项目愿景与范围

    在线制作GIF图片项目愿景与范围 a. 业务需求 a.1 背景 在当今社会中,随着聊天软件和web网站的普及,原创动画制作越来越吸引人们的眼球,一个好的动态图片,可能就会为你的网站或本人赢得更多人的认 ...

  7. [翻译] AAPullToRefresh

    AAPullToRefresh 效果: Requirement - 需要的环境 ARC. iOS 6 or higher(tested on iOS 6, 7 and 8). Install - 安装 ...

  8. win10想说爱你不容易——安装.net3.5也是一个坑（已有完美解决方法）

    最终完美解决方法:经过多次波折,终于找到无法正常安装.net3.5的原因了,是因为已删除的用户还有注册表残留导致的,而且这个问题还会影响一个win10更新的安装,导致每天更新失败,撤销更新... 详见 ...

  9. word用宏命令完美解决列表编号变黑块的问题

    相信很多人跟我一样,多次定义新的多级列表,会导致列表编号变成下面这样黑块 在百度搜索结果尝试了鼠标左键选中应用样式,文档关闭后打开问题依旧: 还是得感谢万能的Google,帮我找到了答案. 问题根因: ...

  10. Log4net 使用之 自定义字段

    Log4net 是.Net下一个非常优秀的开源日志记录组件.Log4net记录日志的功能非常强大.它可以将日志分不同的等级,以不同的格式,输出到不同的媒介. 由于业务需要,计划为日志增加2个字段,除了 ...