Html+Css实现梯形选项卡
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实现梯形选项卡的更多相关文章
- 纯CSS实现tab选项卡切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...
- 用html+css+js实现选项卡切换效果
文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...
- [前端] html+css+javascript 实现选项卡切换效果
用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...
- 各种demo：css实现三角形，css大小梯形，svg使用
各种demo: 1.css实现正方形 思路:width为0:height为0:使用boder-width为正方形的边长的一半,不占任何字节:border-style为固体:border-color为正 ...
- css实现梯形标签页
html <nav>click me</nav> css nav{ position: relative; display: inline-block; padding: 15 ...
- 前端（各种demo）一：css实现三角形，css实现梯形，pop弹层，css伪类before，after使用，svg使用（持续更新中）
各种demo: 1.css实现正方形 思路:width为0:height为0:使用boder-width为正方形的边长的一半,不占任何字节:border-style为固体:border-color为正 ...
- Div+CSS+JQuery实现选项卡，即通过点击不同的li跳转到不同的div中显示不同的内容或者执行不同的操作。
1.代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...
- css 简单梯形
通过css2D变形我们可以轻松得到平行四边形,那么通过此技巧可以得到梯形吗? no! 不过我们可以通过3D旋转得到类似这样的效果: transform:perspective(0.5em) rota ...
- 【CSS】梯形、平行四边形导航条与毛玻璃效果【转】
转载出处:http://www.cnblogs.com/Uncle-Keith/p/5943158.html 代码部分有小改动. 导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生 ...
随机推荐
- apply的“非改变this“的用法
说到apply,大家都是知道是改变this指向的,也都会立马和call联系在一起,MDN官网上也是如是说: 其实我们在平常使用call和apply的时候,都是想到他们的改变函数的this的功能, 正如 ...
- 通过ajax记录打印信息
润乾自带的打印直接可以通过触发js事件来进行调用.onClick="report1_print();return false;" 如果客户需要记录某个用户在某个时间段进行打印 ...
- c# 将秒数转换成时，分，秒的方法
TimeSpan ts = , ,Convert.ToInt32( duration)); string str = ""; ) { str = ts.Hours.ToString ...
- Django Redis配合Mysql验证用户登录
1.redis_check.py # coding:utf-8 import pymysql import redis import sys def con_mysql(sql): db = pymy ...
- leetCode题解 Student Attendance Record I
1.题目描述 You are given a string representing an attendance record for a student. The record only conta ...
- javascript event visualize
很多时候拿到一个spa,特别是基于jquery的比较复杂的spa时,如果你好奇他是如何工作的,往往没有头绪. 由于spa基本上都是基于事件触发的,一个可行的办法是通过查看事件处理代码能够对spa有一个 ...
- ubuntu下配置JDK7环境变量
ubuntu下JDK配置本质上和win是一样的: 1.去官网下载JDK7,找jdk-7u21-linux-i586.tar.gz并下载:http://www.oracle.com/technetwor ...
- 在centos系统安装mongodb
在Linux CentOS系统上安装完php和MySQL后,为了使用方便,需要将php和mysql命令加到系统命令中,如果在没有添加到环境变量之前,执行“php -v”命令查看当前php版本信息时时, ...
- Sql Server数据库备份脚本以及如何在阿里云云数据库RDS还原数据库（代码源自阿里云）
今天研究阿里云服务数据库的迁移,备份和还原的时候,在阿里云web后台发现了一个很好用的sql脚本,就默默地偷了过来,它可以支持全量备份,差异备份和日志备份,代码解释也都很清楚,我也尝试着跑了一下,性能 ...
- 使用vue做项目
使用vue做项目需要用到node.js的npm来管理包 所以我们需要先下载node.js然后通过node的npm来管理包 安装完 nodejs后 我们需要执行 npm install vue-cli ...