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. 怎么配置eclipse的联想功能

    第一步:打开Eclipse,windows下,打开“window”→“Preferences” :mac下,打开“偏好设置”. 第二步:选择“Java”,展开,“Editor”,选择“Content ...

  2. Java 接口和多态

    接口 1.1 接口的概述 接口是功能的集合,同样可看做是一种数据类型,是比抽象类更为抽象的”类”. 接口只描述所应该具备的方法,并没有具体实现,具体的实现由接口的实现类(相当于接口的子类)来完成.这样 ...

  3. 使用MaxCompute访问TableStore（OTS） 简明手册

    摘要: 大数据计算服务 MaxCompute 能够提供强大的分析能力,而分布式 NoSQL 数据库表格存储在行级别上的实时更新和可覆盖性写入等特性,相对于 MaxCompute 内置表 append- ...

  4. 一步一步pwn路由器之radare2使用实战

    前言 本文由 本人 首发于 先知安全技术社区: https://xianzhi.aliyun.com/forum/user/5274 前文讲了一些 radare2 的特性相关的操作方法.本文以一个 c ...

  5. 解决PJA错误

     现场有WAS5.6,均安装在AIX下,且都已经设置PJA,在WAS5上报表正常,但是在WAS6下报表会报错,两个应用下的配置均相同. 反馈的报错日志: [11-4-25 14:20:42:758 ...

  6. maven 依赖和坐标

    1.maven 坐标由groupId.artifactId.packaging.version.classifier定义.2.classifier 用来帮助定义构建输出的一些附属构件.如,*javad ...

  7. Django 多表查询 聚合查询 分组查询 F查询 Q查询

    # -------------------------------------------------------------------------------------------------- ...

  8. 8 tensorflow修改tensor张量矩阵的某一列

    1.tensorflow的数据流图限制了它的tensor是只读属性,因此对于一个Tensor(张量)形式的矩阵,想修改特定位置的元素,比较困难. 2.我要做的是将所有的操作定义为符号形式的操作.也就是 ...

  9. Chrome 插件推荐

    我在这里就是抛砖引玉,各位开发者,有更好的插件请不要吝啬,分享出来. 希望世界和平! 翻译类 沙拉查词 目前使用,感觉挺好的,各种词典,还有统计.划词划句都可以翻译出来. JSON 格式转换 JSON ...

  10. error MSB3552: Resource file "**/*.resx" cannot be found. [/ConsoleApp1.csproj]

    问题场景: 练习在docker下操作netcore,镜像为centos7,安装完netcore sdk 2.2后,执行操作: dotnet new consoledotnet run 出现报错: /u ...