如何使用CSS的clip-path屬性實現分段器的45度曲線效果？

優雅的45度角分段器：利用CSS clip-path打造流暢交互

如何讓分段器在點擊按鈕時，右側邊框以45度角流暢地變為曲線，點擊另一個按鈕時又恢復原狀？這不僅提升視覺吸引力，更能優化用戶體驗。本文將使用CSS的clip-path屬性，結合path函數，完美實現這一效果。

以下代碼示例演示瞭如何創建這種動態的45度曲線分段器：

 


<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>45度角曲線分段器</title>
<style>
.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 50, 50 Z');
}

.content-wrap {
  min-height: 200px;
  background-color: #fff;
}
</style>


<div class="wrap" x-data="initData()">
  <div class="tabs">
    <template x-for="index in 2">
      <div :class="{ 'active': activeIndex == index }" class="tab" x-text="'标签'   index"></div>
    </template>
  </div>
  <div class="content-wrap"></div>
</div>

<script>
function initData() {
  return {
    activeIndex: 1,
    onTabClick(index) {
      this.activeIndex = index;
    }
  };
}
</script>

代碼中， clip-path: path('M 0,50 C 25,50 25,0 50,0 L 50, 50 Z');定義了45度曲線的路徑。通過JavaScript控制active類，實現點擊切換時的動畫效果。 這個方法簡潔高效，讓你的分段器設計更具吸引力。 記住，你需要一個支持clip-path的現代瀏覽器才能看到效果。

以上是如何使用CSS的clip-path屬性實現分段器的45度曲線效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！