我使用纯 HTML 和 SCSS、jsfiddle 和下面的代码创建了一个非常漂亮的选项卡界面。当与我的 Angular UI 集成时，它可以满足我的所有需求 - 活动选项卡和不同的颜色。但现在我...

我使用纯 HTML 和 SCSS、 jsfiddle 和下面的代码创建了一个非常漂亮的标签界面。

当与我的 Angular UI 集成时，它可以满足我的所有需求 - 活动选项卡和不同的颜色。但现在我发现这 transform 会导致 边缘和重叠的角度根据文本的长度而变化 。此外， span 我用来偏移该变换的内部会使文本向另一个方向倾斜。有没有办法让边缘角度和重叠保持相同，并且文本保持笔直，无论长度如何？（我怀疑这里需要 CSS 三角函数。）

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



$positions-tab-color: #f2a870;
$reports-tab-color: #70BFEE;
$stock-tab-color: #66D572;
@mixin tabcolor($color) {
    background: $color;
    border: 1px solid darken($color, 20);
    border-bottom: none;
    color: darken($color, 40);
    &.active {
        box-shadow: 1px 0px 5px darken($color, 40);
    }
}
div.tabs {
    background: white;
    overflow: hidden;
    padding-top: 2px;
    ul {
        margin: 0;
        padding:0;
        li {
            position: relative;
            z-index: 1;
            display: inline-block;
            text-align: center;
            left: 0;
            bottom: 0;
            right: 0;
            margin: 0 -5px 0 0;
            padding: 5px 10px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            transform: perspective(4px) rotateX(2deg);
            transform-origin: bottom;
            filter: saturate(15%) brightness(130%);
            @include tabcolor(#aaa);
            &.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 {
                // text of tab (undo transform)
                transform: perspective(4px) rotateX(-2deg);
                display: block;
                user-select: none;
                text-decoration: none;
                font: bold 11pt Helvetica;
            }
        }
    }
}