Wie verwendet ich das Clip-Pfad-Attribut von CSS, um den 45-Grad-Kurveneffekt des Segmenters zu erreichen?

Eleganter 45-Grad-Winkelsegmentierer: Verwenden Sie CSS- clip-path um eine glatte Interaktion zu erzeugen

Wie kann der Segmentierer beim Klicken auf eine Schaltfläche reibungslos in eine Kurve in einem 45-Grad-Winkel verwandelt, und kehren Sie dann beim Klicken auf eine andere Schaltfläche zu seinem ursprünglichen Status zurück? Dies verbessert nicht nur die visuelle Anziehungskraft, sondern optimiert auch die Benutzererfahrung. In diesem Artikel wird das clip-path -Attribut von CSS verwendet und die Pfadfunktion kombiniert, um diesen Effekt perfekt zu erreichen.

Das folgende Codebeispiel zeigt, wie man einen so dynamischen 45-Grad-Kurvensegmentierer erstellt:

 


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

Im Code, clip-path: path('M 0,50 C 25,50 25,0 50,0 L 50, 50 Z'); Definiert den Pfad einer 45-Grad-Kurve. Steuern Sie die active Klasse über JavaScript, um den Animationseffekt beim Klicken zu erreichen. Diese Methode ist einfach und effizient und macht Ihr Segmentierungsdesign attraktiver. Denken Sie daran, Sie benötigen einen modernen Browser, der clip-path unterstützt, um den Effekt zu erkennen.

Das obige ist der detaillierte Inhalt vonWie verwendet ich das Clip-Pfad-Attribut von CSS, um den 45-Grad-Kurveneffekt des Segmenters zu erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!