Comment puis-je créer une flèche Chevron en utilisant les techniques CSS ?

Réalisation d'une flèche en chevron avec des techniques CSS

Créer une flèche en chevron, caractérisée par deux lignes diagonales se coupant en un point, à l'aide de CSS peut être accompli avec diverses approches.

Une méthode utilise des pseudo-éléments comme avant ou après, qui sont appliqués avec des propriétés CSS. En ajoutant des éléments avant et après, en les faisant pivoter et en les positionnant stratégiquement, la forme de la flèche est formée. Alternativement, vous pouvez ajouter deux bordures à l'élément before et le faire pivoter à l'aide de transform: rotate.

Une autre approche consiste à utiliser un élément HTML réel au lieu de pseudo-éléments. Cela peut être fait en incorporant des flèches sous forme de puces dans une liste. En utilisant des unités em pour les dimensions des flèches, vous pouvez vous assurer qu'elles s'adaptent correctement à la taille de la police de la liste.

Le code CSS suivant illustre cette dernière approche :

<code class="css">ul {
  list-style: none;
}

ul.big {
  list-style: none;
  font-size: 300%
}

li::before {
  position: relative;
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-right: 0.2em solid black;
  border-top: 0.2em solid black;
  transform: rotate(45deg);
  margin-right: 0.5em;
}

li:hover {
  color: red; /* For the text */
}

li:hover::before {
  border-color: red; /* For the arrow (which is a border) */
}</code>

Code HTML montrant l'utilisation :

<code class="html"><ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
</ul>

<ul class="big">
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
</ul></code>

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!