CSS 梯形標簽頁是一種常見的網頁設計元素，用于在頁面上展示不同的內容，并以視覺上吸引人的方式將各個選項區分開來。本文將為讀者介紹如何使用 CSS 創建梯形標簽頁。

/* HTML 代碼 */
<div class="tab-container">
<div class="tab tab1 active">選項卡 1</div>
<div class="tab tab2">選項卡 2</div>
<div class="tab tab3">選項卡 3</div>
</div>
/* CSS 代碼 */
.tab-container {
display: flex;
}
.tab {
width: 33.33%;
padding: 10px;
text-align: center;
font-weight: bold;
color: #666;
}
.tab.active {
background-color: #ffce54;
color: #fff;
position: relative;
}
.tab.active:after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
right: 0;
margin: auto;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 10px solid #ffce54;
}

如上所示，我們首先使用<div>標簽創建一個名為tab-container的塊級容器，緊隨其后的是三個標簽，分別是tab1、tab2和tab3。每個標簽都帶有一個名為tab的類。

接下來，我們在 CSS 樣式表中定義了兩個樣式，分別適用于.tab和.tab.active選擇器。前者表示每個標簽的共同屬性，比如說寬度、內邊距、文本對齊方式和字體樣式等；后者則表示當前選中的選項卡，我們使用一個active類來標記它，并為它設置了一個背景顏色、前景顏色及一些額外的樣式。

最后，我們為每個當前選項卡的后綴添加了一個 CSS 3 偽元素:after。通過這個元素，我們可以方便地添加一個尖角三角形，用以視覺上強調出選項卡之間的差異。這個尖角三角形看起來像一個梯形，整體似乎正在向上升起。