Wie kann man Segmentierungseffekt mit einer 45 -Grad -Kurvenrandung erreichen?

Erstellen Sie einen 45-Grad-Kurven-Grenzsegmentierer: eine clevere Kombination von CSS und JavaScript

Im modernen Design der Benutzeroberfläche sind Segmentierer ein wichtiges Navigationselement, um die Benutzererfahrung zu verbessern, insbesondere in mobilen Anwendungen und reaktionsschnellen Websites. In diesem Artikel wird demonstriert, wie ein Segmentierer mit einem 45-Grad-Winkelkurvenrand erstellt und die Kurvenrichtung dynamisch schaltet, indem Sie auf die Schaltfläche klicken. Dies erfordert eine clevere Verwendung des clip-path Attributs von CSS und die interaktive Logik von JavaScript.

Schritte detaillierte Erläuterung

Erstellen Sie zunächst die grundlegende HTML -Struktur:

<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>

Als nächstes definieren Sie CSS, um den Stil zu definieren. clip-path ist der Kern:

 .tabs {
  Anzeige: Flex;
  Breite: 100%;
  Überlauf: versteckt;
  Border-Radius: 8px 8px 0 0; /* Top der abgerundeten Ecken*//
  Hintergrund: Linear-Gradient ( #CDD9FE, #e2e9fd); /* Hintergrundgradient*///
}

.tab {
  Flex: 1 1 50%; /* Durchschnittliche Verteilungsbreite*//
  Höhe: 50px;
  Cursor: Zeiger;
  Position: Relativ;
  Text-Align: Mitte;
  Zeilenhöhe: 50px;
  Übergang: Hintergrundfarbe 0,3s Leichtigkeit; /* Glätterer Übergang*//
}

.tab.active {
  Hintergrundfarbe: #fff;
  Farbe: #4185ef;
}

.tab.active :: vor { /* linke Kurve* /
  Inhalt: '';
  Position: absolut;
  Top: 0;
  links: -50px;
  Höhe: 100%;
  Breite: 50px;
  Z-Index: 2;
  Hintergrundfarbe: #fff;
  Clip-Pfad: Polygon (0 100%, 50% 100%, 50% 0, 100% 0); /* Vereinfachen Sie Clip-Pfad*/
}

.tab.active :: After { /* richtige Kurve* /
  Inhalt: '';
  Position: absolut;
  Top: 0;
  Rechts: -50px;
  Höhe: 100%;
  Breite: 50px;
  Z-Index: 2;
  Hintergrundfarbe: #fff;
  Clip-Pfad: Polygon (0 0, 50% 0, 50% 100%, 100% 100%); / * Vereinfachen Sie Clip-Pfad */
}

Im Code verwenden wir die einfachere polygon() -Funktion, um clip-path zu definieren, um den Code zu erleichtern. Die transition sorgt für einen reibungslosen Übergang der Hintergrundfarben.

Schließlich verarbeitet JavaScript Klick -Ereignisse und Aktivierungsstatus:

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

Dieser JavaScript -Code fügt für jedes Tag einen Klick -Ereignis -Listener hinzu, entfernt die active Klasse aller Tags beim Klicken und fügt dann nur active Klassen für die Klick -Tags hinzu, wodurch die Kurvenränder dynamisch wechseln. Sie können komplexere JavaScript -Frameworks wie Vue.js oder reagieren, um den Status nach Bedarf zu verwalten. Für einfache Szenarien reicht dieser Code jedoch aus.

In den oben genannten Schritten wird ein Segmentierer mit einem 45-Grad-Kurvenrand und einer dynamischen Reaktion auf Klickereignisse abgeschlossen. Dieses Design ist sowohl schön als auch praktisch und verbessert die Benutzererfahrung.

Das obige ist der detaillierte Inhalt vonWie kann man Segmentierungseffekt mit einer 45 -Grad -Kurvenrandung erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!