Como fazer uma flecha com CSS e HTML
Neste artigo vamos aprender a fazer uma flecha com CSS e HTML puro, sem adição de imagens ou códigos de JavaScript.
Fala programador(a), beleza? Bora aprender coisa nova!
É muito melhor criar formas geométricas e símbolos com CSS
Isso porque podemos manuseá-los como quisermos e até mudar suas formas
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
Uma outra alternativa boa seria svgs, porém vamos resolver o nosso problema deste artigo criando uma flecha apenas com CSS
Veja o HTML necessário:
<!DOCTYPE html>
<html>
<head>
<title>Criar flecha com CSS</title>
</head>
<body>
<div id="corpo"></div>
<div id="ponta"></div>
</body>
</html>
Agora vamos ao CSS:
#ponta {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #000;
border-bottom: 25px solid transparent;
margin-left: 50px;
}
#corpo {
width: 50px;
height: 25px;
background: #000;
position: absolute;
margin-top: 12.5px;
}
Vamos as explicações, primeiro no elemento ponta (que representa a ponta da flecha) nós criamos um triângulo com as propriedades de border
Essas instruções formarão um triângulo com a ponta para a direita
E depois criamos um retângulo, que é o corpo da flecha, dando simplesmente uma altura e largura para a div e preenchendo com um background
Veja a flecha no browser:
E assim concluímos nosso objetivo de criar uma flecha apenas com HTML e CSS
Volto a reforçar que é importante aprendermos a criar formas com CSS
Um outro exemplo dado aqui no blog foi o de um hexágono, que você pode conferir aqui
As chamadas shapes (formas) no CSS tem bem poucas limitações e nós devemos explorará-las
Conclusão
Neste artigo vimos que podemos criar uma flecha com HTML e CSS, utilizamos tags de HTML para estruturar as partes dela como corpo e ponta
Depois inserimos o CSS para dar formas aos elementos, que por fim formaram uma flecha
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube
Formações
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 473 aulas
- 20 projetos
- 39h 26min
Blog | Mais populares
As diferenças de var, let e const
Como fazer redirecionamento com PHP
Neste artigo você vai aprender a como fazer redirecionamento com PHP, utilizaremos abordagens fáceis de entender e de aplicar Fala programador(a), beleza? Bora aprender mais […]
Checklist de segurança n8n VPS pública: guia essencial para proteger sua instalação
Checklist de segurança n8n VPS pública: guia essencial para proteger sua instalação A popularidade da automação de processos com o n8n está em alta, principalmente […]
