A trapezoid can be made by a block element with zero height (height of 0px), a width greater than zero and a border, that is transparent except for one side:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/27e3c828-ee19-4bb7-ba06-8757ad8131ef/Untitled.png

HTML:

<div class="trapezoid"></div>

CSS:

.trapezoid {
    width: 50px;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid black;
}

With changing the border sides, the orientation of the trapezoid can be adjusted.