如何使用CSS transform实现精准45度倒梯形？

你给出的通过transform 3D变换实现倒梯形的思路是可行的，要得到精准45度斜边，核心是要消除透视变形带来的角度误差，保证perspective参数和梯形总高度完全匹配。
很多人实现时随便设置perspective值，哪怕rotateX设为-45度，最终视觉上的斜边角度也会出现偏差，就是因为透视参数和元素高度不匹配导致的。

下面是经过优化的、可直接复用的精准45度倒梯形实现代码：

/* 用CSS变量统一管理参数，调整时不会破坏角度精度 */
.inverted-trapezoid {
    --trapezoid-total-height: 4em; /* 总高度 = 上下padding + 内容高度，这里1.5*2 +1=4em */
    --bg-color: red;
    --text-color: white;

    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5em 0;
    color: var(--text-color);
    height: 1em;
    z-index: 0;
}
.inverted-trapezoid::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--bg-color);
    /* perspective取值等于总高度，搭配rotateX(-45deg)即可得到精准45度斜边 */
    transform: perspective(var(--trapezoid-total-height)) rotateX(-45deg);
    transform-origin: bottom;
}

参数说明：

• 如果你需要调整梯形的大小，只需要同步修改--trapezoid-total-height变量的值和实际容器的总高度即可，45度的倾斜精度不会受到影响
• 仅用单个伪元素实现，不需要额外新增DOM节点，性能开销极低
• 如果需要调整梯形的水平收缩比例，可以在transform后追加scaleX()参数，不会影响斜边的倾斜角度

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