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. 百度 echarts K线图使用

    看个效果图先 首先在需要插入图例的HTML中嵌入 <div id="main" style="height:400px"></div> ...

  2. 关于session销毁的问题，invalidate() 和removeAttribute()

    request.getSession().invalidate(); 销毁当前会话域中的所有属性 request.getSession().removeAttribute("username ...

  3. Git——克隆部分文件

    在进行项目开发的时候,有时候会有这样的需求那就是:我们只希望从Git仓库里取指定的文件或者文件夹出来.在SVN里面,这非常容易实现,因为SVN基于文件方式存储,而Git却是基于元数据方式分布式存储文件 ...

  4. 企业实施ERP的先后步骤，你真的了解吗？

    信息化是我国加快实现工业化和现代化的必然选择.坚持以信息化带动工业化,以工业化促进信息化,在国民经济和社会领域广泛采用信息技术.国民经济信息化中企业的信息化工作是基础, ERP管理系统是IT技术和先进 ...

  5. Reset GitLab Root Password

    重置gitlab管理员密码 Log into your server with root privileges. Then start a Ruby on Rails console. Start t ...

  6. Android 开发中三种多线程

    在开发工程中线程可以帮助我们提高运行速度,Android开发中我知道的线程有四个一个是老生长谈的Thread,第二个是asyncTask,第三个:TimetTask,第四个是Looper,四个多线程各 ...

  7. Teamviewer 手机端怎么拖动窗口，选中文字

    Teamviewer 手机端怎么拖动窗口,选中文字 Teamviewer 手机端拖动窗口,选中文字和触摸板的使用方式是一样的 点两下不松开就可以拖动 点两下不松开也可以选中文字 Teamviewer ...

  8. HBase Compaction详解

    HBase Compaction策略 RegionServer这种类LSM存储引擎需要不断的进行Compaction来减少磁盘上数据文件的个数和删除无用的数据从而保证读性能. RegionServer ...

  9. [翻译] DBCamera 轻量级定制摄像头

    DBCamera 轻量级定制摄像头 https://github.com/danielebogo/DBCamera DBCamera is a simple custom camera with AV ...

  10. python3: 字符串和文本(3)

    11. 删除字符串中不需要的字符  strip() 方法能用于删除开始或结尾的字符: lstrip() 和 rstrip() 分别从左和从右执行删除操作 >>> s = ' hell ...