CSS Simple trapezoid

With css2d deformation we can easily get parallelogram, so can we get the trapezoid through this technique?

No!

But we can get a similar effect with 3D rotation:

Transform:perspective (0.5em) Rotatex (5deg)

To generate a trapezoid.

 <div><a>tixing</a></div> 
 CSS :  -webkit-transform : perspectiv E (0.5em) Rotatex (5deg) ;  border :  1px solid Darkcyan ;  top :  0 ;  left :  0 ;  bottom :  0 ;  right :  0 ;  background :  khaki ;  position :  relative ;            display :  Inline-block ; 

We found that the element content was also deformed.

Solution:

Put the effect on the seat with the pseudo element.

Re-code as follows, the Simple ladder tab is also baked:

<nav><a href= "#" >index</a> <a href= "#" >about</a> <a href= "#" >news</a> </nav> CSS:
Nav>a{position:relative;padding:. 3em 1em 0;
text-decoration:None;Display:Inline-block;}Nav>a::before{content:"';position:Absolute;Top:0; Left:0; Right:0;Bottom:0;background:Lavender;Border:1px solid Olive;Border-bottom:None;-webkit-transform:Perspective (0.5em) scale (1.1,1.3) Rotatex (5deg);Z-index:-1;-webkit-transform-origin:Bottom; }

You can also change the value of transform-origin to bottom left or bottom right. Generates a tab that tilts left or right as follows.

Transform-origin:bottom Left:

-transform-origin:bottom Right:

It is important to note that the angle of the trapezoid hypotenuse depends on the width of the element. Thus, the trapezoid looks very different when the element content is unequal.

CSS Simple trapezoid