Html+Css實現梯形選項卡
阿新 • • 發佈：2017-11-22
second scrip absolute 分享圖片 設置 type bottom osi ans
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實現梯形選項卡