css使用clip-path和伪元素导致的层级问题

最近刚学html和css。写一个网页时发现，如果css同时使用clip-path 和伪元素 ，那么伪元素就会覆盖掉主元素，无法之置于元素的下层。我尝试了z-index，也没有效果，这是属于css的bug吗？有什么好的解决方案吗？

附上我的代码

html 复制代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>个人相册</title>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <link rel="stylesheet" type="text/css" href="css/heart.css"/>
</head>
<body>
<div class="container">
    <div class="tab-label">
        <div class="tab-item" id="main-tab"></div>
        <div class="tab-item" id="collection-tab"></div>
    </div>
</div>
</body>
</html>

css 复制代码

body {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0; /* 去除默认的body边距 */
    height: 100vh; /* 确保body占据整个视口高度 */
    background-image: url('../image/background.png'); /* 替换为你的图片URL */
    background-size: contain; /* 保持图片比例，使其完全显示在背景中 */
    background-position: center; /* 图片居中 */
    background-repeat: no-repeat; /* 避免图片重复 */
    background-attachment: fixed; /* 图片固定，不随滚动条滚动 */
    background-color: #fce6e9;
}

.container {
    position: absolute; /* 脱离文档流 */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 2;
    margin: auto; /* 居中 */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.tab-label{
    max-width: 9%;
    max-height: 25%;
    aspect-ratio: 1/2;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: absolute;
    top: 15%;
    bottom: 0;
    right: 3%;
    width: auto;
    height: auto;
    overflow: hidden;
    isolation: isolate;
    z-index: -100 ;
}

.tab-item {
    width: 100%;
    height: 40%;
    position: absolute;

    /*clip-path: polygon(100% 10%, 70% 50%, 100% 90%, 0% 90%, 0% 10%);*/
}

.tab-item::before {
    content: '';
    position: absolute;
    top: -2px;    /* 边框外扩量 */
    left: -2px;
    /*width: calc(100% + 4px); !* 补偿外扩量 *!*/
    /*height: calc(100% + 4px);*/
    width: calc(100% + 4px); /* 补偿外扩量 */
    height: calc(100% + 4px);
    background: rgb(109, 42, 54); /* 边框颜色 */
    clip-path: polygon(
          100% 8%,    /* 调整顶点坐标外扩 */
          68% 50%,
          100% 92%,
          0% 92%,
          0% 8%
    );
    z-index: -100; /* 置于底层 */
}


#main-tab{
    background-color: #fdcd85;
    position: relative; /* 新增定位 */
}

#collection-tab{
    background-color: #f9978d;
    position: relative; /* 新增定位 */
}

效果就是这样

棕色是我希望置于元素下层的颜色，来作为裁剪后元素的边框