如何通过matrix3d将正方形变成三角形？

Question

如何通过

matrix3d

变换将正方形变成三角形？

预计： 在此输入图片描述

例如，用正方形得到梯形

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>

我尝试过使用

clip-path

，但是没有它我可以吗？

Answer 1

这不是最好的想法，但如果您考虑一些角度并调整变换原点，那么也是可行的。不用玩了

matrix3d()

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

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