Rahmen mit oberem Dreieck

Einführung

In diesem Lab werden wir lernen, wie man mithilfe von CSS einen Inhaltscontainer mit einem Dreieck oben erstellt. Dies ist ein häufiges Design-Element, das in vielen Websites und Anwendungen verwendet wird, um visuelles Interesse zu erzeugen und ein Gefühl der Hierarchie zu schaffen. Am Ende dieses Labs werdet ihr die Fähigkeiten haben, diesen Effekt zu erzeugen und auf eure eigenen Projekte anzuwenden.

Rahmen mit oberem Dreieck

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

Um einen Inhaltscontainer mit einem Dreieck oben zu erstellen, folgen Sie diesen Schritten:

1. Verwenden Sie die Pseudoelemente ::before und ::after, um zwei Dreiecke zu erstellen.
2. Legen Sie die border-color und background-color der Dreiecke so fest, dass sie mit dem Container übereinstimmen.
3. Legen Sie die border-width des ::before-Dreiecks um 1px größer als die des ::after-Dreiecks fest, um als Rahmen zu fungieren.
4. Positionieren Sie das ::after-Dreieck 1px rechts vom ::before-Dreieck, um den linken Rahmen sichtbar zu machen.

Hier ist ein Beispiel für den HTML-Code des Containers:

<div class="container">Border with top triangle</div>

Und hier ist der entsprechende CSS-Code:

.container {
  position: relative;
  background: #ffffff;
  padding: 15px;
  border: 1px solid #dddddd;
  margin-top: 20px;
}

.container::before,
.container::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 19px;
  border: 11px solid transparent;
}

.container::before {
  border-bottom-color: #dddddd;
}

.container::after {
  left: 20px;
  border: 10px solid transparent;
  border-bottom-color: #ffffff;
}

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 Lab "Rahmen mit oberem Dreieck" abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.