在web設(shè)計(jì)中，梯形標(biāo)簽頁(yè)是很常見(jiàn)的一種形式，但是梯形又是一種很難實(shí)現(xiàn)的樣式，很多開(kāi)發(fā)者會(huì)直接用梯形背景圖片來(lái)生成效果，但是采用背景圖片的方式產(chǎn)生了額外的http請(qǐng)求，并不是一種非常理想的方式，這里筆者為大家?guī)?lái)一種直接用css來(lái)實(shí)現(xiàn)梯形效果的方法。
 

以一個(gè)簡(jiǎn)單的div為例：

<div class="div">這是一個(gè)梯形</div>

.div{
    position: relative;
    display: inline-block;
    padding: .5em 1em .35em;
    color: white;
}
.div::before{
    content: ''; /*用偽元素來(lái)生成一個(gè)矩形*/
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #58a;
    transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
    transform-origin: bottom;
}

如果我們直接對(duì)元素結(jié)點(diǎn)進(jìn)行3D變形，那么元素內(nèi)的內(nèi)容也會(huì)產(chǎn)生變形，這是一種不理想的效果，所以這里利用偽元素，將變形效果作用到偽元素上，就可以實(shí)現(xiàn)理想的效果。在這里，變形的時(shí)候，我們固定住了底部，它的高度是會(huì)發(fā)生變化的，所以通過(guò)scaleY(1.3)來(lái)補(bǔ)足它在高度上的縮水。讀者可以去掉scaleY(1.3)和transform-origin來(lái)對(duì)比查看效果，這里筆者將兩種結(jié)果都展示出來(lái)：

這是沒(méi)有scaleY和transform-origin產(chǎn)生的結(jié)果

這是上述代碼產(chǎn)生的樣式結(jié)果

既然一個(gè)梯形標(biāo)簽產(chǎn)生了，那我們就可以進(jìn)一步生成多個(gè)標(biāo)簽頁(yè)，這里筆者為大家?guī)?lái)一個(gè)簡(jiǎn)單的示例。

<nav>
    <a href="#">Home</a>
    <a href="#">Projects</a>
    <a href="#">About</a>
</nav>

nav>a{
    position: relative;
    display: inline-block;
    padding: .3em 1em 0;
}
nav>a::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #ccc;
    background-image: linear-gradient(hsla(0,0%,100%,.6),hsla(0,0%,100%,0));
    border: 1px solid rgba(0,0,0,.4);
    border-bottom: none;
    border-radius: .5em .5em 0 0;
    transform: perspective(.5em) rotateX(5deg);
    transform-origin: bottom;
}

產(chǎn)生的效果圖是這樣的：

讀者可以改變transform-origin的屬性為：left,right,bottom left, left right等查看不同的效果，這里筆者為大家展示幾種效果:

總結(jié)

以上所述是小編給大家介紹的CSS實(shí)現(xiàn)梯形標(biāo)簽頁(yè)的核心代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！