Comment utiliser l'attribut Clip-Path de CSS pour réaliser l'effet de courbe à 45 degrés du segmenter?

Segmenteur d'angle élégant de 45 degrés: Utilisez CSS clip-path pour créer une interaction lisse

Comment faire en sorte que le segmenteur se transforme en douceur en courbe à un angle de 45 degrés lorsque vous cliquez sur un bouton, puis revenez à son état d'origine lorsque vous cliquez sur un autre bouton? Cela améliore non seulement l'attrait visuel, mais optimise également l'expérience utilisateur. Cet article utilisera l'attribut clip-path de CSS et combinera la fonction de chemin pour réaliser parfaitement cet effet.

L'exemple de code suivant montre comment créer un segment de courbe à 45 degrés aussi dynamique:

 


<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Segmenteur de courbe d'angle de 45 degrés</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>

Dans le code, clip-path: path('M 0,50 C 25,50 25,0 50,0 L 50, 50 Z'); Définit le chemin d'une courbe de 45 degrés. Contrôlez la classe active via JavaScript pour réaliser l'effet d'animation lors de la cliquetis de basculement. Cette méthode est simple et efficace, ce qui rend votre conception de segmentation plus attrayante. N'oubliez pas que vous avez besoin d'un navigateur moderne qui prend en charge clip-path pour voir l'effet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!