如何让CSS transform在不同宽度元素上保持相同角度？

要解决标签页边缘角度随文本长度变化、文本反向倾斜的问题，核心是放弃使用perspective+rotateX的整体变换，改用固定角度的边缘构造方式，同时让文本保持正常排版。具体实现如下：

核心思路 #

1. 用伪元素(::before/::after)配合CSS三角函数(tan())绘制固定角度的标签斜边，避免整体透视变形导致的角度不一致
2. 取消文本的反向变换，让文本直接保持正常排版
3. 通过负边距和层级控制，维持标签间的重叠视觉效果

修改后的SCSS代码 #

$positions-tab-color: #f2a870;
$reports-tab-color: #70BFEE;
$stock-tab-color: #66D572;
// 定义标签斜边角度，用tan计算宽度系数
$tab-angle: 2deg;
$tab-slope: tan($tab-angle);
$tab-height: 30px; // 标签基准高度，用于计算斜边尺寸

@mixin tabcolor($color) {
    background: $color;
    border-top: 1px solid darken($color, 20);
    color: darken($color, 40);
    &.active {
        box-shadow: 1px 0px 5px darken($color, 40);
    }
    // 绘制左右斜边伪元素
    &::before, &::after {
        content: '';
        position: absolute;
        top: 0;
        width: $tab-height * $tab-slope;
        height: 100%;
        background: $color;
        border-top: 1px solid darken($color, 20);
    }
    &::before {
        left: -($tab-height * $tab-slope);
        transform: skewX(-$tab-angle);
        border-top-left-radius: 5px;
    }
    &::after {
        right: -($tab-height * $tab-slope);
        transform: skewX($tab-angle);
        border-top-right-radius: 5px;
    }
}

div.tabs {
    background: white;
    overflow: hidden;
    padding-top: 2px;
    padding-left: $tab-height * $tab-slope; // 抵消左侧伪元素的偏移
    ul {
        margin: 0;
        padding:0;
        display: flex;
        li {
            position: relative;
            z-index: 1;
            display: inline-block;
            text-align: center;
            margin: 0 -($tab-height * $tab-slope) 0 0; // 重叠相邻标签斜边
            padding: 5px 15px;
            height: $tab-height;
            line-height: $tab-height; // 文本垂直居中
            filter: saturate(15%) brightness(130%);
            @include tabcolor(#aaa);
            overflow: hidden;

            &.stock-tab {
                @include tabcolor($stock-tab-color);
            }
            &.positions-tab {
                @include tabcolor($positions-tab-color);
            }
            &.reports-tab {
                @include tabcolor($reports-tab-color);
            }
            &:hover {
                filter: saturate(30%) brightness(120%);
                transition: all 0.1s ease;
                color: #333;
                cursor: pointer;
                &.active {
                    border-color: #000;
                }
            }
            &.active {
                filter: saturate(100%) brightness(100%);
                z-index: 2;
                color: #000;
            }
            span {
                user-select: none;
                text-decoration: none;
                font: bold 11pt Helvetica;
                // 移除原反向变换代码
            }
        }
    }
}

保持原HTML结构不变 #

<div class="tabs">
  <ul>
    <li class="active positions-tab"><span>Tab 1</span></li>
    <li class="positions-tab"><span>Tab 2</span></li>
    <li class="positions-tab"><span>Very loooooong Tab</span></li>
    <li class="reports-tab"><span>X</span></li>
    <li class="reports-tab"><span>Tab 3</span></li>
    <li class="stock-tab"><span>Tab 4</span></li>
  </ul>
</div>

效果说明 #

• 固定角度边缘：通过tan($tab-angle)计算斜边宽度，无论标签文本长短，左右斜边角度始终保持2度，视觉完全一致
• 文本笔直显示：不再对标签整体做倾斜变换，内部文本无需反向修正，直接保持正常排版
• 重叠效果保留：通过负边距让相邻标签斜边重叠，配合z-index确保激活标签在最上层，与原视觉效果一致

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