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 of the shape. Only the top and right side columns are slanted, vertical and bottom are straight. How can I do this with CSS?

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>