How to use the clip-path attribute of CSS to achieve the 45-degree curve effect of segmenter?

Elegant 45-degree angle segmenter: Use CSS clip-path to create smooth interaction

How to make the segmenter smoothly turn into a curve at a 45-degree angle when clicking a button, and then return to its original state when clicking another button? This not only enhances visual appeal, but also optimizes the user experience. This article will use the clip-path attribute of CSS and combine the path function to perfectly achieve this effect.

The following code example demonstrates how to create such a dynamic 45-degree curve segmenter:

 


<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>45 degree angle curve segmenter</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>

In the code, clip-path: path('M 0,50 C 25,50 25,0 50,0 L 50, 50 Z'); defines the path of a 45-degree curve. Control the active class through JavaScript to achieve the animation effect when clicking toggle. This method is simple and efficient, making your segmentation design more attractive. Remember, you need a modern browser that supports clip-path to see the effect.

The above is the detailed content of How to use the clip-path attribute of CSS to achieve the 45-degree curve effect of segmenter?. For more information, please follow other related articles on the PHP Chinese website!