¿Cómo hacer una flecha Chevron usando CSS?

No dudes en divulgar nuestra web y códigos en tus redes sociales, necesitamos tu ayuda para aumentar nuestra comunidad.

Solución:

Puedes usar el before o after pseudo-elemento y aplicarle algo de CSS. Hay varias formas. Puedes agregar ambos before y after, y gire y coloque cada uno de ellos para formar una de las barras. Una solución más fácil es agregar dos bordes solo al before elemento y gírelo usando transform: rotate.

Desplácese hacia abajo para encontrar una solución diferente que use un elemento real en lugar de los pseudoelementos

En este caso, agregué las flechas como viñetas en una lista y usé em tamaños para que tengan el tamaño adecuado con la fuente de la lista.

ul 
    list-style: none;


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


li::before 
    position: relative;
    /* top: 3pt; Uncomment this to lower the icons as requested in comments*/
    content: "";
    display: inline-block;
    /* By using an em scale, the arrows will size with the font */
    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;


/* Change color */
li:hover 
  color: red; /* For the text */

li:hover::before 
  border-color: red; /* For the arrow (which is a border) */

    
Item1
    
Item2
    
Item3
    
Item4



    
Item1
    
Item2
    
Item3
    
Item4

Por supuesto, no es necesario utilizar before o after, también puede aplicar el mismo truco a un elemento normal. Para la lista anterior es conveniente, porque no necesita marcado adicional. Pero a veces es posible que desee (o necesite) el marcado de todos modos. Puedes usar un div o span para eso, e incluso he visto gente incluso reciclar el i elemento para ‘iconos’. Entonces ese marcado podría verse como a continuación. Ya sea usando porque esto es correcto es discutible, pero también puede usar span para estar seguro.

/* Default icon formatting */
i 
  display: inline-block;
  font-style: normal;
  position: relative;


/* Additional formatting for arrow icon */
i.arrow 
    /* top: 2pt; Uncomment this to lower the icons as requested in comments*/
    width: 0.4em;
    height: 0.4em;
    border-right: 0.2em solid black;
    border-top: 0.2em solid black;
    transform: rotate(45deg);

And so you can have an  in your text.
This arrow is  used to be deliberately lowered slightly on request.
I removed that for the general public  but you can uncomment the line with 'top'  to restore that effect.

.triangle 
    border-right: 10px solid; 
    border-bottom: 10px solid;
    height: 30px;
    width: 30px;
    transform: rotate(-45deg);

body
  font-size: 25px; /* Change font and  see the magic! */
  color: #f07;     /* Change color and see the magic! */
 

/* RESPONSIVE ARROWS */
[class^=arr-]
  border:       solid currentColor;
  border-width: 0 .2em .2em 0;
  display:      inline-block;
  padding:      .20em;

.arr-right transform:rotate(-45deg);
.arr-left  transform:rotate(135deg);
.arr-up    transform:rotate(-135deg);
.arr-down  transform:rotate(45deg);

This is  .arr-right

This is  .arr-left

This is  .arr-up

This is  .arr-down