CSS Implementation Ladder tab page

In the Web design, trapezoidal tab is a very common form, but trapezoid is a difficult to implement the style, the following small section to share the use of CSS to implement the ladder tag page code, the need for friends to refer to the next bar

In the Web design, trapezoidal tab is a very common form, but trapezoid is a difficult to implement style, many developers will directly use the ladder background image to create the effect, but the use of background images to generate additional HTTP requests, not a very ideal way, Here the author for everyone to bring a direct use of CSS to achieve the ladder effect of the method.

Take a simple p for example:

<p class= "P" > This is a trapezoid </p>

. p{    position:relative;    Display:inline-block;    padding:. 5em 1em. 35em;    Color:white;}. p::before{    content: '; * * use pseudo-elements to generate a rectangle */    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 to the element node 3D deformation, then the content within the element will also be deformed, this is an undesirable effect, so here the use of pseudo-elements, the deformation effect on the pseudo-element, you can achieve the ideal effect. Here, when deformed, we fix the bottom, its height is changed, so we can use ScaleY (1.3) to compensate for its shrinkage in height. The reader can remove ScaleY (1.3) and Transform-origin to compare the results, and the author shows both of them:

This is not the result of ScaleY and Transform-origin.

This is the result of the style generated by the above code

Since a trapezoidal label has been generated, then we can further generate more than one tab, here I would like to 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 result is this:

The reader can change the properties of Transform-origin: Left,right,bottom left, left right and so on to view different effects, here I show you several effects: