如何使用css将选项卡制作为箭头形状

Question

我创建了一个选项卡，每个选项卡中都包含每个组件。选项卡大小看起来像一个矩形形状，但我想以这种格式获得一个像箭头形状的选项卡。在这里，我添加了带有组件的每个选项卡链接，但我无法做类似箭头的选项卡设计。 那么如何使用CSS代码片段制作这个像标签一样的形状

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;

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;
}

Answer 1

这可以通过添加具有绝对位置的对角正方形的

::after

伪元素来完成。更多解释请参见代码注释：

.tab-container {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 25vh;
}
.tab {
  width: calc(100% - 25px); /* The whole width apart from our arrow */
  padding: 10px;
  text-align: center;
  background-color: #f0f0f0;
  border: 1px solid #434DB8;
  color:#434DB8;
  cursor: pointer;
  position: relative; /* So we position our arrow relative to the tab */
}
.tab::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
  aspect-ratio: 1/1;
  height: 70.71%; /* sqrt 2 * full height */
  transform: rotate(45deg); /* makes it diagonal */
  transform-origin: top left;
  background-color: #f0f0f0;
  border-top: 1px solid #434DB8;
  border-right: 1px solid #434DB8;
}
.tab.active {
  background-color: #434DB8;
  color:#FFFFFF;
  font-weight: bold;
}
.tab.active::after {
  background-color: #434DB8;
}