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

Content area