CSS如何實(shí)現(xiàn)梯形標(biāo)簽頁(yè)
小編給大家分享一下CSS如何實(shí)現(xiàn)梯形標(biāo)簽頁(yè)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名申請(qǐng)、網(wǎng)站空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、義烏網(wǎng)站維護(hù)、網(wǎng)站推廣。
以一個(gè)簡(jiǎn)單的div為例：
這是一個(gè)梯形
.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{
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等查看不同的效果，這里筆者為大家展示幾種效果:
以上是“CSS如何實(shí)現(xiàn)梯形標(biāo)簽頁(yè)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
分享名稱：CSS如何實(shí)現(xiàn)梯形標(biāo)簽頁(yè)
標(biāo)題來(lái)源：
http://weahome.cn/article/goigds.html
重慶分公司
重慶分公司
