CSS HTML

Como fazer uma seta com CSS – fácil e rápido

23 de abril de 2020

Como fazer uma seta com CSS – fácil e rápido

Neste artigos vamos aprender como fazer uma seta com CSS e HTML, sem utilizar JavaScript ou imagens, de uma maneira fácil e rápida.

seta com css capa

Fala programador(a), beleza? Bora aprender coisa nova!

As necessidades de criar formas com CSS são das mais variadas pois tem muitos benefícios

Como poder moldar a forma que construímos como bem entendermos, o que deve ser o ponto principal

Outra opção seria com svg, que também nos permite mudar o tamanho e cor do objeto

Mas vamos nos ater ao propósito do artigo e iniciar a construção da seta com CSS

Veja o HTML inicial:

<!DOCTYPE html>
<html>
<head>
    <title>Como fazer uma seta com CSS</title>
</head>
<body>	
    <div id="seta"></div>
</body>
</html>

Como você pode observar, precisamos apenas de um elemento, que neste caso é a div com o id seta

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Agora veja o CSS:

#seta {
  position: absolute;
  padding: 20px;
  box-shadow: 2px -2px 0 1px #000 inset;
  border: solid transparent;
  border-width: 0 0 2px 2px;
}

Inserimos um elemento com posição absoluta, para posicionarmos onde for necessário

O padding vai dar o corpo da seta, ou seja, para aumentá-la é só alterar este valor

A propriedade box-shadow formará suas arestas e a largura da borda dará a espessura da seta

Veja o que é representado no navegador:

seta com html css exemplo

Nos é exibido um ‘L’, perceba que o formato de seta já existente

Precisamos agora só rotacionar para a posição necessária, veja um exemplo de seta a esquerda:

transform: rotate(45deg);

E assim a seta ‘gira’ para a esquerda e está pronta:

seta com html css exemplo 2

Conclusão

Neste artigo vimos como criar uma seta com CSS e HTML

Utilizamos uma div apenas, para estruturar o elemento no código

E depois um pouco de CSS para criar um ‘L’, onde devemos utilizar transform e rotate para deixar no ângulo que necessitamos

Finalizando assim a nossa seta! 🙂

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x