打造45度曲線邊框分段器：css與JavaScript的巧妙結合
在現代用戶界面設計中，分段器是提升用戶體驗的關鍵導航元素，尤其在移動應用和響應式網站中。本文將演示如何創建一個帶有45度角曲線邊框的分段器，并通過點擊按鈕動態切換曲線方向。 這需要巧妙運用CSS的clip-path屬性和JavaScript的交互邏輯。
步驟詳解
首先，構建基本的html結構：
<div class="wrap"> <div class="tabs"> <div class="tab" data-index="0">標簽1</div> <div class="tab" data-index="1">標簽2</div> </div> <div class="content-wrap"></div> </div>
接下來，使用CSS定義樣式，clip-path是核心：
.tabs { display: flex; width: 100%; overflow: hidden; border-radius: 8px 8px 0 0; /* 圓角頂部 */ background: linear-gradient(#cdd9fe, #e2e9fd); /* 背景漸變 */ } .tab { flex: 1 1 50%; /* 平均分配寬度 */ height: 50px; cursor: pointer; position: relative; text-align: center; line-height: 50px; transition: background-color 0.3s ease; /* 平滑過渡 */ } .tab.active { background-color: #fff; color: #4185ef; } .tab.active::before { /* 左側曲線 */ content: ''; position: absolute; top: 0; left: -50px; height: 100%; width: 50px; z-index: 2; background-color: #fff; clip-path: polygon(0 100%, 50% 100%, 50% 0, 100% 0); /* 簡化clip-path*/ } .tab.active::after { /* 右側曲線 */ content: ''; position: absolute; top: 0; right: -50px; height: 100%; width: 50px; z-index: 2; background-color: #fff; clip-path: polygon(0 0, 50% 0, 50% 100%, 100% 100%); /* 簡化clip-path */ }
代碼中，我們使用了更簡潔的polygon()函數來定義clip-path，使代碼更易讀。 transition屬性確保了背景顏色的平滑過渡。
最后，JavaScript處理點擊事件和激活狀態：
const tabs = document.querySelectorAll('.tab'); tabs.forEach(tab => { tab.addEventListener('click', () => { tabs.forEach(t => t.classList.remove('active')); tab.classList.add('active'); }); });
這段JavaScript代碼為每個標簽添加點擊事件監聽器，點擊時移除所有標簽的active類，然后只為被點擊的標簽添加active類，從而實現動態切換曲線邊框。 你可以根據需要使用更復雜的JavaScript框架（如vue.JS或React）來管理狀態，但對于簡單的場景，這段代碼已經足夠。
通過以上步驟，一個具有45度曲線邊框，并能動態響應點擊事件的分段器就完成了。 這種設計既美觀又實用，提升了用戶體驗。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
