如何實現帶有45度曲線邊框的分段器效果？

打造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度曲線邊框，並能動態響應點擊事件的分段器就完成了。 這種設計既美觀又實用，提升了用戶體驗。

以上是如何實現帶有45度曲線邊框的分段器效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！