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?
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>