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. dojox.grid.DataGrid显示数据的方法（转）

    第一种:数据存在本地或者已经写死的JSON对象中,不需要跟服务端进行数据传输 <%@ page language="java" contentType="text/ ...

  2. Android布局属性

    LinearLayout布局: 线性版面配置,在这个标签中,所有元件都是按由上到下的排队排成的.在这个界面中,我们应用了一个 LinearLayout的布局,它是垂直向下扩展的 ,所以创建的布局XML ...

  3. linux_kernel_uaf漏洞利用实战

    前言 好像是国赛的一道题.一个 linux 的内核题目.漏洞比较简单,可以作为入门. 题目链接: 在这里 正文 题目给了3个文件 分配是 根文件系统 , 内核镜像, 启动脚本.解压运行 boot.sh ...

  4. maven打包 springBoot 工程时，默认识别resources目录，习惯使用 resource 目录的需要手动指定静态资源目录

    最近项目开发,发现springBoot项目在使用maven打包时,我们静态资源文件都放在resource目录下面,大致如下: 在使用maven打包时,发现静态资源没有打进去.原来springBoot默 ...

  5. popup定位引擎popper.js介绍

    https://medium.com/@FezVrasta/popper-js-v1-5e8b3acd888c https://survivejs.com/blog/popper-interview/ ...

  6. leveldb源码分析--Key结构

    [注]本文参考了sparkliang的专栏的Leveldb源码分析--3并进行了一定的重组和排版 经过上一篇文章的分析我们队leveldb的插入流程有了一定的认识,而该文设计最多的又是Batch的概念 ...

  7. 读取Execl表数据 导入数据库

    不知不觉博客园园林都两年多了,我是今年毕业的应届生,最近公司项目需要改动,很多的数据需要导入,很多的实体类需要些.考虑到这些问题自己写了两个winform版的小工具,一个是读取Execl数据导入数据库 ...

  8. jsp 页面间传递参数

    JSP页面间传递参数是经常需要使用到的功能,有时还需要多个JSP页面间传递参数.下面介绍一下实现的方法. (1)直接在URL请求后添加 如:< a href="thexuan.jsp? ...

  9. python已写内容中可能的报错及解决办法

    理论上我发的每个短文,直接复制放到py里面,python xx.py是可以执行的,不过因为版本,编码什么的问题会有报错,详见这里 报错: SyntaxError: Non-ASCII characte ...

  10. Provisional headers are shown

    问题: Chrome请求出现"Provisional headers are shown": 原因: 这种一般是由于浏览器端的插件或客户端的软件对请求进行了拦截:我们出现的情况,是 ...