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

zTree

Tab1-Test1

Tab2-Test2

$(()=>{

$("#tab1").click((e)=>{

$("#tab1").addClass("ladder_selected");

$("#tab2").removeClass("ladder_selected");

});

$("#tab2").click((e)=>{

$("#tab2").addClass("ladder_selected");

$("#tab1").removeClass("ladder_selected");

});

});

@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