Как создать двойную вкладку со скошенными краями, используя реакцию, CSS, HTML? ⇐ CSS

[Anonymous]

Я пытаюсь добиться следующего вида для моей двойной вкладки, введите здесь описание изображения
но проблема в том, что я добился следующего ввода описания изображения здесь, проблема в том, что есть пробел между ними я изучил предыдущий веб-сайт и обнаружил, что у них есть 2 вкладки, правая вкладка имеет поле слева, а затем есть 2 параллелограмма, которые смещаются влево и вправо, поле составляет около 48 пикселей, поэтому один параллелограмм перемещается 24 пикселя, в то время как другой также перемещается на 24 пикселя. вот мой код
Я пытался исказить перекат, чтобы получился параллелограмм, а затем переместил оба 24 пикселя каждый, но все равно безрезультатно
.container {
margin: 0 auto;
padding: 0;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
height: 50vh;
/* overflow: hidden; */
}

@media (min-width: 768px) {
.container {
width: 66.6667%;
}
}

@media (min-width: 1024px) {
.container {
width: 80%;
}
}

.tab-container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 60px;
overflow: visible;
/* border-radius: 8px; */
/* background-color: #1b1b1b; */
}

.tab {
display: flex; /* Use flexbox */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
position: relative;
flex: 1;
height: 100%;
text-align: center;
align-items: center;
font-weight: bold;
cursor: pointer;
color: #777;
background-color: #181a20;
border: none;
z-index: 1;
}

.tab.active {
color: white;
background-color: #181a20;
}

.tab.not-active {
background-color: #2c2c2c;
}

.tab.sell {
margin-left: 48px; /* Positive margin for overlap */
z-index: 2;
}

.tab-content {
display: inline-block;
position: relative;
z-index: 1;
}

.tab::before,
.tab::after {
content: '';
position: absolute;
top: 0;
height: 100%;
z-index: 0;
width: 24px;

}

.buy.active::after {
transform: skewX(10deg);
background-color: #181a20;
right: -24px;
width: 24px;

}

.sell.not-active::before {
transform: skewX(10deg);
background-color: #2c2c2c;
left: -24px;
width: 24px;

}

.sell.active::before {
transform: skewX(-10deg);
background-color: #181a20;
left: -24px;
width: 24px;

}

.buy.not-active::after {
transform: skewX(-10deg);
background-color: #2c2c2c;
right: -24px;
width: 24px;

}

.form {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
background-color: #fff;
}

.label {
display: flex;
justify-content: space-between;
align-items: center;
}

.input {
margin-left: 10px;
padding: 8px;
font-size: 16px;
width: 100%;
box-sizing: border-box;
}

@media (max-width: 600px) {
.tab {
padding: 10px 0;
}

.form {
padding: 10px;
}

.input {
font-size: 14px;
}
}

import React, { useState } from 'react';
import './BuySellContainer.css';
import AssetInput from '../AssetInput/AssetInput';

const BuySellContainer: React.FC = () => {
const [mode, setMode] = useState('buy');

const handleModeChange = (newMode: 'buy' | 'sell') => {
setMode(newMode);
};

return (



handleModeChange('buy')}
className={`tab buy ${mode === 'buy' ? 'active' : 'not-active'} `} >
Buy

onClick={() => handleModeChange('sell')}
className={`tab sell ${mode === 'sell' ? 'active' : 'not-active'} `}
>
Sell



{mode === 'buy' ? (

) : (

)}




);
};

export default BuySellContainer;


Подробнее здесь: https://stackoverflow.com/questions/790 ... t-css-html