How to create trapezoidal tabs with CSS

This time I will show you how to make a trapezoidal tab page with CSSTab page, what are the notes for making a trapezoidal tab page with CSS, the following is a practical case, let’s take a look one time.

In web design, the trapezoidal tab page is a very common form, but the trapezoid is a difficult style to implement. Many developers will directly use the trapezoid background image to generate the effect, but use the background The image method 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>这是一个梯形</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 3D deform the element node, the content within the element will also be deformed. , this is an unideal effect, so here we use pseudo elements and apply the deformation effect to 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 the style result produced by the above code

Now that a trapezoidal label is generated, we can further generate multiple label pages, here The author brings you a simple example.

<nav>
    <a>Home</a>
    <a>Projects</a>
    <a>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. Check out the different effects. Here I show you several effects:

## I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of pointer-events in css3

Completely use CSS to center elements

Detailed explanation of the use of focus-within

CSS3 to make seamless carousel ads

The above is the detailed content of How to create trapezoidal tabs with CSS. For more information, please follow other related articles on the PHP Chinese website!