CSS Implementation Ladder tab page

Source: Internet
Author: User
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:




Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.