[SOLVED] How to make square into triangle by matrix3d?

How to make square into triangle by matrix3d?

How can I turn a square into a triangle with a matrix3d transformation?

For example, a trapezoid obtained from a square usign matrix3d:

.trapezoid {
  width: 80px; 
  height: 80px; 
  background-color: black;
  transform: matrix3d(1, 0, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}

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

I have tried using clip-path, but can I do it without it?

Solution

Not the best idea but doable if you consider some perspective and adjust the transform origin as well. No need to play with matrix3d()

I didn't do any calculation, I manually adjusted the value until I get close to the shape.

.trapezoid {
  width: 80px; 
  height: 80px; 
  background-color: black;
  transform-origin: top left;
  transform: perspective(1px) scaleY(45) rotateX(-30deg);
}

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

If you want the matrix, you can get it from the computed tab

.trapezoid {
  width: 80px; 
  height: 80px; 
  background-color: black;
  transform-origin: top left;
  transform: matrix3d(1, 0, 0, 0, 0, 38.9711, -0.5, 0.5, 0, 22.5, 0.866025, -0.866025, 0, 0, 0, 1);
}

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