CSS 梯形页标签 实现(主要利用border属性)

	
Tab1-Test1
	
Tab2-Test2


	

	

 

@charset "UTF-8";

.ladder{
	
	width: 0;
	height: 0;
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
	border-bottom: 30px solid #ccc;
	width: 90px;
	
	display: inline-block;
	margin-right: -60px;
	z-index: -1;
	font-weight: bold;
	vertical-align: middle;
}
.ladder_selected{
	/*z-index只能在position
	属性值为relative或absolute或fixed的元素上有效!
	非常关键.
	*/
	position:relative;
	z-index: 0;
	border-bottom-color: RGB(137,157,192);
	color: white;
}
.ladder:hover{
	cursor: pointer;
}
.position_center{
	position: absolute;
	transform: translateY(40%);
}

 

 

 

 

项目地址,页面http://localhost:8080/ladder