Comment créer une flèche en chevron creux avec CSS ?

Créer une flèche en chevron avec CSS

Question

En utilisant CSS, vous pouvez facilement créer un triangle rempli, comme le démontre l'extrait de code ci-dessous :

<code class="css">#triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}</code>

Mais comment créer un triangle creux en forme de flèche, comme le montre l'image ci-dessous ?

[Image d'une flèche en chevron]

Réponse

Vous pouvez créer ce type de flèche en utilisant les pseudo-éléments avant ou après avec CSS. Voici un aperçu du processus :

• Ajoutez le pseudo-élément avant ou après à l'élément souhaité.
• Appliquez des styles CSS pour personnaliser l'apparence et la position du pseudo-élément.

Par exemple, vous pouvez utiliser le CSS suivant :

<code class="css">::before {
    content: "";
    position: absolute;
    width: 0.5em;
    height: 0.5em;
    border-top: 1px solid black;
    border-right: 1px solid black;
    transform: rotate(45deg);
    margin-right: 0.5em;
}</code>

Ce CSS crée un triangle creux avec un contour noir, pivoté de 45 degrés. Vous pouvez ajuster les propriétés de largeur, de hauteur et de bordure pour personnaliser l'apparence.

Vous pouvez également obtenir cet effet sans utiliser de pseudo-éléments :

• Créez un nouveau < durée> ou
  élément dans votre HTML.
• Utilisez CSS pour styliser l'élément sous forme de flèche, y compris sa taille, sa couleur et sa rotation.

Voici un exemple :

<code class="css">.chevron {
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-top: 1px solid black;
    border-right: 1px solid black;
    transform: rotate(45deg);
    margin-right: 0.5em;
}</code>

Dans ce cas, vous pouvez ajouter la classe .chevron à l'élément souhaité pour créer l'effet de flèche.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!