Как реализовать вкладку вкладок, как показано на рисунке？ [Закрыто] ⇐ CSS

[Anonymous]

Введите описание изображения здесь. Дизайн вызвал у меня головную боль. Пожалуйста, помогите мне. Спасибо, добрые люди.



{{item.text}}



< /code>


.tab-list {
display: flex;
position: relative;
z-index: 2;
background-color: #fff;
overflow: hidden;
}

.tab-item {
flex: 1;
height: 52px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24rpx;
color: #333;
font-weight: 600;
position: relative;

}

.tab-icon {
width: 17px;
height: 17px;
margin-top: 1px;
}

.tab-selected {
opacity: 1;
background: #f3f5f7;
border-radius: 12px 12px 0 0;

box-shadow: 24px 40px 0 #f3f5f7, -24px 40px 0 0 #f3f5f7;

}

.tab-selected::before {
content: '';
position: absolute;
left: -6px;
bottom: 0;
width: 12px;
height: 52px;
border-top-left-radius: 12px;
background-color: #f3f5f7;
transform: skewX(-15deg);

}

.tab-selected::after {
content: '';
position: absolute;
right: -6px;
bottom: 0;
width: 12px;
height: 52px;
border-top-right-radius: 12px;
background-color: #f3f5f7;
transform: skewX(15deg);
}

.not-selected::before {
content: '';
position: absolute;
left: 6px;
bottom: 0;
width: 12px;
height: 52px;
background: #fff;
border-bottom-left-radius: 12px;
transform: skewX(15deg);
}

.not-selected::after {
content: '';
position: absolute;
right: 6px;
bottom: 0;
width: 12px;
height: 52px;
background: #fff;
border-bottom-right-radius: 12px;
transform: skewX(-15deg);
z-index: 1;
}



Подробнее здесь: https://stackoverflow.com/questions/796 ... the-figure