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 {
  디스플레이 : Flex;
  너비 : 100%;
  오버플로 : 숨겨진;
  Border-Radius : 8px 8px 0 0; /* 둥근 모서리의 상단*/
  배경 : 선형 등급 ( #cdd9fe, #e2e9fd); /* 배경 구배*/
}

.tab {
  플렉스 : 1 1 50%; /* 평균 분포 너비*/
  높이 : 50px;
  커서 : 포인터;
  위치 : 상대;
  텍스트 정렬 : 센터;
  라인 높이 : 50px;
  전환 : 배경색 0.3S 편의; /* 부드러운 전환*/
}

.tab.active {
  배경색 : #fff;
  색상 : #4185ef;
}

.tab.active :: 이전 { /* 왼쪽 곡선* /
  콘텐츠: '';
  위치 : 절대;
  상단 : 0;
  왼쪽 : -50px;
  높이 : 100%;
  너비 : 50px;
  z- 인덱스 : 2;
  배경색 : #fff;
  클립 경로 : 다각형 (0 100%, 50% 100%, 50% 0, 100% 0); /* Clip-Path의 단순화*/
}

.tab.active :: 이후 { /* 오른쪽 곡선* /
  콘텐츠: '';
  위치 : 절대;
  상단 : 0;
  오른쪽 : -50px;
  높이 : 100%;
  너비 : 50px;
  z- 인덱스 : 2;
  배경색 : #fff;
  클립 경로 : 다각형 (0 0, 50% 0, 50% 100%, 100% 100%); / * Clip-Path의 단순화 */
}

코드에서는 더 간단한 polygon() 함수를 사용하여 clip-path 정의하여 코드를보다 쉽게 ​​읽을 수 있습니다. transition 속성은 배경색의 원활한 전환을 보장합니다.

마지막으로 JavaScript는 클릭 이벤트 및 활성화 상태를 처리합니다.

 const tabs = document.querySelectorAll ( '. Tab');
tabs.foreach (탭 => {
  tab.addeventListener ( 'click', () => {
    tabs.foreach (t => t.classlist.remove ( 'active'));
    tab.classlist.add ( 'active');
  });
});

이 JavaScript 코드는 각 태그에 대한 클릭 이벤트 리스너를 추가하고 클릭하면 모든 태그의 active 클래스를 제거한 다음 클릭 된 태그에 대한 active 클래스 만 추가하여 곡선 경계를 동적으로 전환합니다. vue.js와 같은보다 복잡한 JavaScript 프레임 워크 또는 필요에 따라 상태를 관리하기 위해 반응 할 수 있지만 간단한 시나리오의 경우이 코드로 충분합니다.

위의 단계를 통해 45도 곡선 테두리를 갖는 세그먼터가 클릭 이벤트에 동적으로 응답합니다. 이 디자인은 아름답고 실용적이며 사용자 경험을 향상시킵니다.

위 내용은 45도 곡선 테두리로 분할 효과를 달성하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!