Как создать двойную вкладку с наклонными краями?

Я пытаюсь достичь следующего вида для своих двух вкладок вставьте описание изображения здесь

Можно посмотреть примеры на
https://www.binance.com/en/crypto/buy/AUD/USDT
https://www.okx.com/sell-crypto#sourceQuote=usd&sourceBase=usdt

Но проблема в том, что я добился следующего вставьте описание изображения здесь. Проблема в том, что между ними есть расстояние, я изучил предыдущий сайт и выяснил, что у них есть 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; /* Используйте флексбокс */
    justify-content: center; /* Центрировать по горизонтали */
    align-items: center; /* Центрировать по вертикали */
    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; /* Положительный отступ для перекрытия */
    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' | 'sell'>('buy');

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

    return (
        <div className="container">
            <div className="tab-container">

                <div
                    onClick={() => handleModeChange('buy')}
                    className={`tab buy ${mode === 'buy' ? 'active' : 'not-active'} `} >
                    <span className="tab-content">Купить</span>
                </div>

                <div
                    onClick={() => handleModeChange('sell')}
                    className={`tab sell ${mode === 'sell' ? 'active' : 'not-active'} `}
                >
                    <span className="tab-content">Продать</span>
                </div>
            </div>
            <div className="form">
                {mode === 'buy' ? (
                    <AssetInput label="Вы заплатите" asset="HKD" />
                ) : (
                    <AssetInput label="Вы продадите" asset="HKD" />
                )}

                <AssetInput label="Вы получите" asset="USDT" />

            </div>

        </div>
    );
    };

export default BuySellContainer;