巧用css打造45度角曲線分段器
現代網頁設計中，分段器（或標簽切換器）是常見的交互元素。本文將介紹如何利用CSS的clip-path屬性和path函數，實現點擊左側按鈕時，右側邊框呈現45度曲線的動態效果，提升用戶體驗。
核心思路是為每個標簽創建偽元素，用clip-path定義45度曲線。激活標簽時，曲線便會動態出現在左側或右側。
以下為html和CSS代碼示例：
<div class="wrap"> <div class="tabs"> <div class="tab active">標簽1</div> <div class="tab">標簽2</div> </div> <div class="content-wrap"></div> </div>
.wrap { background-color: #eee; width: 375px; margin: 0 auto; padding: 10px; } .tabs { display: flex; width: 100%; overflow: hidden; border-radius: 8px 8px 0 0; background: linear-gradient(#cdd9fe, #e2e9fd); } .tab { flex: 0 0 50.1%; height: 50px; cursor: pointer; position: relative; text-align: center; line-height: 50px; } .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: path('M 0,50 C 25,50 25,0 50,0 L 50, 50 Z'); } .tab.active:after { /* 右側曲線 */ content: ''; position: absolute; top: 0; right: -50px; height: 100%; width: 50px; z-index: 2; background-color: #fff; clip-path: path('M 0,0 C 25,0 25,50 50,50 L 0, 50 Z'); } .content-wrap { min-height: 200px; background-color: #fff; }
代碼中，clip-path: path(…) 精確定義了45度曲線的路徑。 JavaScript (例如，使用Alpine.JS或其他框架) 可以用來管理active類，實現標簽點擊切換效果。 此方法簡潔高效，為開發者提供了一種優雅的實現動態元素的方案。
立即學習“前端免費學習筆記（深入）”；
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
