cssmatrixcss-transforms

How to make square into triangle by matrix3d?


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

Expected: enter image description here

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>