CSS How to make trapezoidal tab page

This time to everyone to bring CSS how to make the ladder of the tab page, CSS to make trapezoidal tabs on what to note, the following is the actual case, together to see.

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-elements, you can achieve the ideal effect. Here, when the deformation, we fixed the bottom, its height will change, so through scaleY(1.3) to complement it in the height of the shrinkage. The reader can be removed scaleY(1.3)和transform-origin to compare the results of the review, here the author will show two kinds of result:

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:

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS3 pointer-events use of the detailed

Using CSS to implement element centering

Focus-within the use of a detailed

CSS3 Make Seamless Carousel ads