Trapezoid Tabs
Trapezoid
Trapezoid using transform with scaleY, perspective & rotate with a pseudo-element
.trapezoid {
position: relative;
display: inline-block;
padding: .5em 1em .35em;
color: white;
text-align: center;
}
.trapezoid::before {
content: ''; /* to generate the box */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #8E8DBE;
transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
transform-origin: bottom; /* so base remains fixed as it rotates in space */
}
Lea Verou's styled tabs