如何使用matrix3d变换将正方形转换为三角形？

仅靠matrix3d无法实现将正方形转换为三角形的效果，核心原因如下：

• matrix3d属于仿射变换范畴，这类变换会保持图形的拓扑结构：它可以实现拉伸、倾斜、旋转等操作，但无法让四边形的两个顶点完全重合（这是将四边形转为三角形的必要条件），仿射变换后图形的边数不会改变。
• 你提供的梯形示例，本质是通过倾斜变换（shear）让四边形的一组对边不再平行，但它依然是四边形，完全符合仿射变换的规则。

无需clip-path的替代实现方案 #

如果不想使用clip-path，可以通过以下几种方式实现三角形效果：

方法1：线性渐变模拟 #

通过背景线性渐变让正方形的一半区域透明，从而模拟三角形：

.triangle {
  width: 80px;
  height: 80px;
  background: linear-gradient(to bottom right, black 50%, transparent 50%);
}

<div class="triangle"></div>

方法2：skew变换+容器裁剪 #

通过父容器的overflow:hidden裁剪倾斜后的子元素，得到三角形：

.triangle-wrap {
  width: 80px;
  height: 80px;
  overflow: hidden;
}
.triangle-inner {
  width: 100%;
  height: 100%;
  background-color: black;
  transform: skewY(-45deg) translateY(-50%);
}

<div class="triangle-wrap">
  <div class="triangle-inner"></div>
</div>

方法3：经典边框技巧 #

利用元素边框的衔接特性实现三角形，这是前端中常用的无额外嵌套方案：

.triangle {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 80px solid black;
}

<div class="triangle"></div>

内容的提问来源于stack exchange，提问作者Nguyen Huy