Erstelle visuell ansprechende Shape Separators | CSS Design

Einführung

In diesem Lab werden wir untersuchen, wie man einen Shape-Separator mit CSS erstellt. Der Separator wird eine SVG-Shape verwenden, um zwei verschiedene Blöcke visuell zu trennen. Indem wir das ::after-Pseudo-Element verwenden und die Hintergrundfarbe des übergeordneten Elements festlegen, können wir den Separator leicht anpassen, um der Gesamtgestaltung unserer Webseite zu entsprechen. In diesem Lab erhalten Sie praktische Erfahrungen bei der Erstellung eines visuell ansprechenden und funktionalen Separators mit CSS.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") subgraph Lab Skills css/selectors -.-> lab-35238{{"Erstellen von Shape Separators mit CSS"}} css/colors -.-> lab-35238{{"Erstellen von Shape Separators mit CSS"}} css/width_and_height -.-> lab-35238{{"Erstellen von Shape Separators mit CSS"}} css/positioning -.-> lab-35238{{"Erstellen von Shape Separators mit CSS"}} css/backgrounds -.-> lab-35238{{"Erstellen von Shape Separators mit CSS"}} css/pseudo_elements -.-> lab-35238{{"Erstellen von Shape Separators mit CSS"}} end

Shape Separator

index.html und style.css wurden bereits in der VM bereitgestellt.

Um ein Separatorelement zwischen zwei verschiedenen Blöcken mit einer SVG-Shape zu erstellen, folgen Sie diesen Schritten:

Verwenden Sie das ::after-Pseudo-Element.
Fügen Sie die SVG-Shape (ein 24x12-Dreieck) über eine Data URI mithilfe der background-image-Eigenschaft hinzu. Das Hintergrundbild wird standardmäßig wiederholt und die gesamte Fläche des Pseudo-Elements abdecken.
Legen Sie die gewünschte Farbe für den Separator mithilfe der background-Eigenschaft des übergeordneten Elements fest.

Verwenden Sie folgenden HTML-Code:

<div class="shape-separator"></div>

Und wenden Sie folgende CSS-Regeln an:

.shape-separator {
  position: relative;
  height: 48px;
  background: #9c27b0;
}

.shape-separator::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='transparent'/%3E%3C/svg%3E");
  position: absolute;
  width: 100%;
  height: 12px;
  bottom: 0;
}

Klicken Sie bitte in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Shape Separator Lab abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.