CSS의 클립 경로 속성을 사용하여 세그먼터의 45도 곡선 효과를 달성하는 방법은 무엇입니까?

우아한 45도 각도 세그먼트 : CSS clip-path 사용하여 부드러운 상호 작용을 만듭니다.

버튼을 클릭 할 때 세그먼터를 45도 각도로 부드럽게 곡선으로 바꾸는 방법을 클릭 한 다음 다른 버튼을 클릭 할 때 원래 상태로 돌아가는 방법은 무엇입니까? 이는 시각적 호소력을 향상시킬뿐만 아니라 사용자 경험을 최적화합니다. 이 기사는 CSS의 clip-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의 클립 경로 속성을 사용하여 세그먼터의 45도 곡선 효과를 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!