Créer un conteneur de contenu avec un triangle en haut

Introduction

Dans ce laboratoire, nous allons apprendre à créer un conteneur de contenu avec un triangle en haut à l'aide de CSS. Ceci est un élément de design courant utilisé dans de nombreux sites Web et applications pour ajouter un intérêt visuel et créer un sens d'hiérarchie. À la fin de ce laboratoire, vous aurez les compétences pour créer cet effet et l'appliquer à vos propres projets.

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.

Bordure avec triangle en haut

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

Pour créer un conteneur de contenu avec un triangle en haut, suivez ces étapes :

Utilisez les pseudo-éléments ::before et ::after pour créer deux triangles.
Réglez la couleur de bordure et la couleur de fond des triangles pour correspondre au conteneur.
Réglez la largeur de bordure du triangle ::before pour qu'elle soit de 1px plus large que le triangle ::after pour servir de bordure.
Positionnez le triangle ::after à 1px à droite du triangle ::before pour permettre d'afficher la bordure gauche.

Voici un exemple de code HTML pour le conteneur :

<div class="container">Bordure avec triangle en haut</div>

Et voici le code CSS correspondant :

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

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 Bordure avec triangle en haut. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.