CSS實現梯形標籤頁的方法

來源:互聯網
上載者:User
在web設計中,梯形標籤頁是很常見的一種形式,但是梯形又是一種很難實現的樣式,很多開發人員會直接用梯形背景圖片來產生效果,但是採用背景圖片的方式產生了額外的http請求,並不是一種非常理想的方式,這裡筆者為大家帶來一種直接用css來實現梯形效果的方法。

以一個簡單的p為例:

<p class="p">這是一個梯形</p>

.p{    position: relative;    display: inline-block;    padding: .5em 1em .35em;    color: white;}.p::before{    content: ''; /*用虛擬元素來產生一個矩形*/    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;}

如果我們直接對元素結點進行3D變形,那麼元素內的內容也會產生變形,這是一種不理想的效果,所以這裡利用虛擬元素,將變形效果作用到虛擬元素上,就可以實現理想的效果。在這裡,變形的時候,我們固定住了底部,它的高度是會發生變化的,所以通過scaleY(1.3)來補足它在高度上的縮水。讀者可以去掉scaleY(1.3)和transform-origin來對比查看效果,這裡筆者將兩種結果都展示出來:


這是沒有scaleY和transform-origin產生的結果

這是上述代碼產生的樣式結果

既然一個梯形標籤產生了,那我們就可以進一步產生多個標籤頁,這裡筆者為大家帶來一個簡單的樣本。

<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;}

產生的是這樣的:

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




以上內容就是CSS實現梯形標籤頁的方法,希望對大家有協助。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.