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. Ubuntu中网络配置interfaces与界面网络配置NetworkManager

    [Server版本] 在Ubuntu Server版本中,因为只存有命令行模式,所以要想进行网络参数设置,只能通过修改 /etc/network/interfaces .具体设置方法如下: (1) U ...

  2. 3The superclass “javax.servlet.http.HttpServlet" was not found on the Java Build Path 之一

    另外一篇短文里还有第三种解决方案,查看请点击这里 1.异常信息 创建maven web项目时,出现 The superclass “javax.servlet.http.HttpServlet&quo ...

  3. 动态修改JDBC数据源配置

    因项目需要能动态修改数据源的配置,及修改后不用重启整个应用.使用的数据源是apache的BasicDataSource,网上千篇一律的是如下实现: BasicDataSource bds=getDat ...

  4. 【Kettle】2、文件夹与界面介绍

    1.文件夹介绍 下载Kettle6.1解压后出现下图相关文件夹以及文件夹介绍说明: Lib:存放Kettle的核心(core)jar包.工作引擎(engine)jar包.数据库(DB) jar包.图形 ...

  5. Common administrative commands in Red Hat Enterprise Linux 5, 6, and 7

    https://access.redhat.com/articles/1189123 Common administrative commands in Red Hat Enterprise Linu ...

  6. Azure Document DB Repository 的实现

    阅读 需要大约  5 分钟. 前景: Azure Cosmos DB 由 Microsoft 提供,是全球分布式多模型数据库. 通过 Azure Cosmos DB 跨任意数量的 Azure 地理区域 ...

  7. [控件] CircleView

    CircleView 效果图: 源码: // // CircleView.h // YXMWeather // // Created by XianMingYou on 15/2/17. // Cop ...

  8. 转载：python的编码处理（一）

    以下内容转载自: http://in355hz.iteye.com/blog/1860787 最近业务中需要用 Python 写一些脚本.尽管脚本的交互只是命令行 + 日志输出,但是为了让界面友好些, ...

  9. (转)图形学理论知识 BRDF 双向反射分布函数（Bidirectional Reflectance Distribution Function）

    BRDF理论 BRDF表示的是双向反射分布函数(Bidirectional Reflectance Distribution Function),它描述了光线如何在物体表面进行反射,可以用来描述材质属 ...

  10. 网络编程--Socket(套接字)

    网络编程 网络编程的目的就是指直接或间接地通过网络协议与其他计算机进行通讯.网络编程中 有两个主要的问题,一个是如何准确的定位网络上一台或多台主机,另一个就是找到主机后 如何可靠高效的进行数据传输.在 ...