CSS implements ladder tab page

In web design, trapezoidal tabs are a very common form, but trapezoidal is a style that is difficult to implement. Below, I will share with you the code for using CSS to implement trapezoidal tabs. Friends who need it can refer to it. Let’s go

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 The use of background images generates additional http requests, which is not a very ideal method. 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 If we directly perform 3D deformation on the element node, the content within the element will also be deformed. This is an undesirable effect. Therefore, pseudo elements are used here to apply the deformation effect to the pseudo elements to achieve the ideal 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 is the detailed content of CSS implements ladder tab page. For more information, please follow other related articles on the PHP Chinese website!