Trapezoid tabs

Using without pseudo-elements

1. To create this effect we need to add transformproperty.
2. Using perspectiveallow us to use element in 3d environment.
3. Finally using the rotate property on X axis move the element.
4. Problem !! Using this method move all the child elements for example our pmarkup in our div, Solution below.

Solution with pseudo-elements

1. First we add position: relativein our parent element.
2. Then we create in our css file the pseudo-elements ::before who will create an element as the first child that can be stylized later as we want.
3. To display our ::beforewe need to add this property content: ''.
4. Once our element is stylized we can start to use the transform property above, by this way only the ::beforeelement will be change.
5. We can add the transform-originproperty to change the origin of operations like rotatescale..