Is it possible to create this irregular quadrilateral with CSS?

Question

I\'ve tried the perspective solution here How to transform each side of a shape separately? but can\'t get it to work probably due to the irregularness

Answer 1

Using CSS borders you can create triangles and trapezoids.

You can achieve your shape joining a triangle and a trapezoid.

.triangle {
  border: 0 solid red;
  border-left-width: 500px;
  border-top-width: 30px;
  border-top-color: transparent;
}
.trapezoid {
  border: 0 solid red;
  width: 500px;
  border-bottom-width: 150px;
  border-right-width: 30px;
  border-right-color: transparent;
}

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