如何通过CSS和JavaScript实现分段器的45度曲线效果？

打造炫酷分段器：CSS和JavaScript实现45度角曲线效果

在UI设计中，精细的细节能提升用户体验。本文将演示如何使用CSS和JavaScript创建一个带有45度角曲线效果的分段器。这种效果在用户切换选项时，会动态展现流畅的曲线过渡，增强视觉吸引力。

首先，我们来看HTML结构：

  

    
选项一
    
选项二
  
  

    
  

接下来，使用CSS构建基础样式和曲线效果：

.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%; /* 平均分配宽度 */
  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: -1px; /* 微调位置 */
  height: 100%;
  width: 1px;
  z-index: 2;
  background-color: #fff;
  clip-path: polygon(0 0, 50% 0, 100% 100%, 100% 100%); /* 使用polygon简化曲线定义 */
}

.tab.active::after { /* 右侧曲线 */
  content: '';
  position: absolute;
  top: 0;
  right: -1px; /* 微调位置 */
  height: 100%;
  width: 1px;
  z-index: 2;
  background-color: #fff;
  clip-path: polygon(0 100%, 0 100%, 50% 0, 100% 0); /* 使用polygon简化曲线定义 */
}

这里使用了clip-path: polygon()，用多边形来更简洁地定义45度角曲线，避免了path()函数的复杂性。

Manus

全球首款通用型AI Agent，可以将你的想法转化为行动。

下载

立即学习“Java免费学习笔记（深入）”；

最后，JavaScript代码控制标签切换：

const tabs = document.querySelectorAll('.tab');
tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    tabs.forEach(t => t.classList.remove('active'));
    tab.classList.add('active');
  });
});

这段代码为每个选项添加点击事件，确保只有一个选项处于激活状态。 通过以上CSS和JavaScript的结合，即可轻松实现具有45度角曲线效果的分段器。 此方法比原方案更简洁高效。