Como fazer tab como uma forma de seta usando css

Eu criei uma guia e em cada guia ela contém cada componente. O tamanho da guia parece uma forma retangular, mas quero obter uma guia como esta neste formato, como uma forma de seta. Aqui, adicionei cada link de guia com um componente, mas não consigo fazer uma seta projeto. então, como fazer esta forma como guia usando o trecho de código css é fornecido abaixo

import React, { useState } from 'react';
import './styles.css';
const TabContent = ({ children }) => {
  return (
    <div style={{ width: '100vw', height: '100vh', backgroundColor: 'gray' }}>
      {children}
    </div>
  );
};

const Tab = ({ label, active, onClick }) => {
  const tabClass = active ? 'tab active' : 'tab';

  return (
    <div className={tabClass} onClick={onClick}>
      {label}
    </div>
  );
};

const App = () => {
  const [activeTab, setActiveTab] = useState(1);

  const handleTabClick = (tabIndex) => {
    setActiveTab(tabIndex);
  };

  return (
    <div className="tab-container">
      <div style={{ display: 'flex' ,gap:'20px'}}>
        <div style={{ flex: '0 0 180px', marginRight: '10px' }}>
          <Tab label="Tab 1" active={activeTab === 1} onClick={() => handleTabClick(1)} />
          <Tab label="Tab 2" active={activeTab === 2} onClick={() => handleTabClick(2)} />
          <Tab label="Tab 3" active={activeTab === 3} onClick={() => handleTabClick(3)} />
        </div>
        <div style={{ flex: '1 1 auto' }}>
          {activeTab === 1 && <TabContent>Component1</TabContent>}
          {activeTab === 2 && <TabContent>Component2</TabContent>}
          {activeTab === 3 && <TabContent>Component3</TabContent>}
        </div>
      </div>
    </div>
  );
};

export default App;

e css é

  .tab-container {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 25vh;
}

.tab {
  width: 100%;
  padding: 10px;
  text-align: center;
  background-color: #f0f0f0;
  border: 1px solid #434DB8;
  color:#434DB8;
  cursor: pointer;
  border-top-right-radius:100%;
  border-bottom-right-radius:100%;
}

.tab::after{
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  left: 30%;
  border-bottom: 2px solid #434DB8;
  border-right: 3px solid #434DB8;
  border-left: 5px solid transparent;
  transform: rotate(-45deg);
  
}
.tab.active {
  background-color: #434DB8;
  color:#FFFFFF;
  font-weight: bold;
}