Trapezoid

by otinanaipali

HTML

<div class='trapezoid'></div>

CSS

body{background:#000}

.trapezoid::before {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom,rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 60%) repeat scroll 0 0;
    content: "";
    display: block;
    height: 130px;
    transform: skewX(-30deg) rotate(-60deg) translateX(0px) translateY(50%);
    width: inherit;
}
.trapezoid {
    display: inline-block;
    height: inherit;
    margin: 0 20px;
    overflow: hidden;
    transform: rotate(240deg) skewX(30deg);
    width: 150px;
}