LabEx
EntrerRejoindre

Création de séparateurs de forme avec CSS

Beginner

This tutorial is from open-source community. Access the source code

Introduction

Dans ce laboratoire, nous allons explorer la manière de créer un séparateur de forme à l'aide de CSS. Le séparateur utilisera une forme SVG pour diviser visuellement deux blocs différents. En utilisant l'élément pseudo-élément ::after et en définissant la couleur d'arrière-plan de l'élément parent, nous pouvons facilement personnaliser le séparateur pour correspondre à la conception globale de notre page web. Ce laboratoire vous procurera une expérience pratique pour créer un séparateur attrayant visuellement et fonctionnel à l'aide de CSS.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Séparateur de forme

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour créer un élément séparateur entre deux blocs différents à l'aide d'une forme SVG, suivez ces étapes :

  1. Utilisez l'élément pseudo-élément ::after.
  2. Ajoutez la forme SVG (un triangle de 24x12) via une URI de données à l'aide de la propriété background-image. L'image d'arrière-plan se répétera par défaut et couvrira toute la zone de l'élément pseudo-élément.
  3. Définissez la couleur souhaitée pour le séparateur en utilisant la propriété background de l'élément parent.

Utilisez le code HTML suivant :

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

Et appliquez les règles CSS suivantes :

.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;
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire Séparateur de forme. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.