Create a 45-degree curve border segmenter: a clever combination of CSS and JavaScript

In modern user interface design, segmenters are a key navigation element to enhance user experience, especially in mobile applications and responsive websites. This article will demonstrate how to create a segmenter with a 45-degree angle curve border and dynamically switch the curve direction by clicking the button. This requires clever use of CSS' clip-path attribute and JavaScript's interactive logic.

Steps detailed explanation

First, build the basic HTML structure:

<div class="wrap">
  <div class="tabs">
    <div class="tab" data-index="0">Tag 1</div>
    <div class="tab" data-index="1">Tag 2</div>
  </div>
  <div class="content-wrap"></div>
</div>

Next, use CSS to define the style, clip-path is the core:

 .tabs {
  display: flex;
  width: 100%;
  overflow: hidden;
  border-radius: 8px 8px 0 0; /* top of rounded corners*/
  background: linear-gradient(#cdd9fe, #e2e9fd); /* background gradient*/
}

.tab {
  flex: 1 1 50%; /* Average distribution width*/
  height: 50px;
  cursor: pointer;
  position: relative;
  text-align: center;
  line-height: 50px;
  transition: background-color 0.3s ease; /* Smooth transition*/
}

.tab.active {
  background-color: #fff;
  color: #4185ef;
}

.tab.active::before { /* left curve*/
  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); /* Simplify clip-path*/
}

.tab.active::after { /* Right curve*/
  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%); /* Simplify clip-path */
}

In the code, we use the simpler polygon() function to define clip-path to make the code easier to read. The transition property ensures a smooth transition of background colors.

Finally, JavaScript handles click events and activation status:

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

This JavaScript code adds a click event listener for each tag, removes the active class of all tags when clicked, and then adds only active classes for the clicked tags, thereby dynamically switching curve borders. You can use more complex JavaScript frameworks like Vue.js or React to manage state as needed, but for simple scenarios, this code is enough.

Through the above steps, a segmenter with a 45-degree curve border and dynamically responding to click events is completed. This design is both beautiful and practical, improving the user experience.

The above is the detailed content of How to achieve segmentation effect with 45 degree curve border?. For more information, please follow other related articles on the PHP Chinese website!