JSFiddle - React, Tailwind, and code Playground

HTML

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

SCSS

/*Since we usually define box-sizing globally...*/
* { box-sizing:border-box; }

@mixin trapezoid($width, $color) {
	width: $width;
	height: 0;
	border-right: $width / 2 solid transparent;
	border-bottom: $width solid $color;
	border-left: $width / 2 solid transparent;
    /*...we have to negate it here in order to make the trapezoid work*/
	box-sizing: content-box; 
}

.trapezoid {
	@include trapezoid(80px, red);
}