Várias maneiras de criar setas apenas com css

Publicado em: 21-04-2018
Neste tutorial vou ensinar como criar setas/triângulos com css de várias maneiras diferentes e você poderá decidir qual delas será mais apropriada para sua necessidade.

Regras essenciais:

width: 0; /* A largura deve ser sempre 0 */
height: 0; /* A altura deve ser sempre 0 */
border: 15px solid transparent; /* Define o tamanho da seta e esconde todas as bordas*/
border-left-color: #00ff2d; /* Define a cor para o lado da borda que deseja mostrar */


O segredo para isso são as bordas, você mostra a borda para o lado contrário que deseja que a seta esteja apontada e as outras bordam devem ser transparentes.

Por exemplo, eu quero uma seta apontado para a esquerda:

/* Seta que aponta para esquerda*/
.setas-normal .seta_left .seta{
margin-left: -15px;
border: 15px solid transparent; /* Tamanho da seta */
border-right-color: #00ff2d; /* Cor e lado da seta */
}


Vou deixar aqui uma lista com vários exemplos:


See the Pen
CSS Arrows
by Samuel Martinenghi (@Haisan)
on CodePen.




continue lendo