如何用右直角括号样式设计多步表单进度选项卡并修复显示异常

现有代码的核心问题 #

• 伪元素旋转实现斜切角时，边框计算逻辑错位，45度旋转的元素会连带露出多余黑边，和相邻tab的层级重叠混乱
• 类名拼写错误：代码中.acitive是错写的类名，没有实际匹配到元素，导致激活态的斜角背景色不生效
• z-index设置没有配合层叠逻辑梳理，要么斜角被容器裁剪遮挡，要么黑边压到相邻tab的内容

纯CSS修复方案（无需额外引入分隔图片） #

这个方案不需要靠旋转伪元素硬凑形状，用clip-path和渐变描边实现斜切效果，能自适应激活/未激活状态的颜色变化，比图片分隔的维护成本更低：

1. 调整flex布局的对齐方式，去掉多余的overflow: hidden，避免斜角被容器裁切
2. 两层伪元素分层实现：一层用渐变做斜切位置的黑色描边，一层用clip-path裁出和tab同色的斜切填充，两层自然叠加出带黑边的斜切尖角效果
3. 给激活态tab设置更高的层级，保证尖角自然压到相邻未激活tab的边缘，不会出现缝隙

修正后的完整代码参考：

#progressbar {
    height: 54px;
    width: 100%;
    border: 4px solid black;
    display: flex;
    align-items: stretch;
}
#progressbar div {
    flex: 1;
    text-align: center;
    line-height: 46px;
    background-color: white;
    position: relative;
    color: crimson;
    margin-right: -16px; /* 预留斜角的重叠空间 */
}
#progressbar div.active {
    background-color: lightcoral;
    color: white;
    z-index: 2; /* 激活tab层级更高，压过相邻普通tab */
}
/* 非最后一个tab的斜切黑边层 */
#progressbar div:not(:last-child)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom left, transparent 48%, black 49%, black 51%, transparent 52%);
    z-index: -1;
}
/* 非最后一个tab的斜切填充层，和tab背景色保持一致 */
#progressbar div:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 4px;
    right: -4px;
    width: calc(100% - 4px);
    height: calc(100% - 8px);
    background: inherit;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}

HTML结构不需要做任何修改，保留原有的#progressbar容器和带active类的步骤tab即可。

关于用图片做tab分隔的方案 #

如果确实想使用图片实现分隔，注意两个问题：

• 准备透明背景的斜角切边图，匹配进度条的高度尺寸
• 需要准备两种颜色的分隔图，分别对应激活态（lightcoral填充）和未激活态（white填充）的场景，因为图片没法自动继承tab的背景色
• 图片要绝对定位在两个tab的衔接位置，配合z-index控制层级，否则会出现错位遮挡

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