CSS method to implement ladder tab page

In web design, trapezoidal tabs are a very common form, but trapezoid is a style that is difficult to implement. Many developers will directly use trapezoid background images to generate effects, but use background images. Generating additional http requests is not a very ideal way. Here, the author brings you a method to directly use CSS to achieve the trapezoidal effect.

Take a simple p as an example:

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

If we directly perform 3D deformation on the element node, the content within the element will also be deformed. This is an unsatisfactory effect, so pseudo elements are used here to apply the deformation effect to the pseudo elements. elements, you can achieve the desired effect. Here, when deforming, we fixed the bottom, and its height will change, so we use scaleY(1.3) to make up for its shrinkage in height. Readers can remove scaleY(1.3) and transform-origin to compare and view the effects. Here I will display both results:

This is the result produced without scaleY and transform-origin

This is produced by the above code Style results

Now that a trapezoidal label is generated, we can further generate multiple label pages. Here I bring you a simple example.

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

The resulting rendering is like this:

Readers can change the properties of transform-origin to: left, right, bottom left, left right, etc. to see different effects. Here I will show you several effects. :

#The above content is the method of implementing ladder tab page with CSS. I hope it will be helpful to everyone.

Related recommendations:

Use css to achieve simple animation effects

Use HTML+CSS to achieve animation effects

How to use CSS to achieve multi-column layout

The above is the detailed content of CSS method to implement ladder tab page. For more information, please follow other related articles on the PHP Chinese website!