Criando Triângulos e Setas Apenas com HTML e CSS


Criando-Triagulos-e-Setas-com-CSS

Utilizar códigos para criar imagens é sempre a melhor opção. Os benefícios de utilizar códigos são grandes, melhoramos o carregamento das páginas, facilitamos a manutenção e evitamos o trabalho de recortar, salvar e nomear os arquivos criados em ferramentas gráficas.

Quero mostrar neste post algo simples mas muito eficaz na hora de criar setas no formato de triângulo em menus, tooltips e onde mais possam ser inseridos na sua interface, apenas utilizando HTML e CSS.

Neste exemplo vamos criar um tooltip:

CSS

.tooltip {
  background: #f90;
  color: #fff;
  padding: 15px;
  position: relative;
  width: 200px;
}

.tooltip:before {
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-right-color: #f90;
  content: "";
  left: -20px;
  position: absolute;
}

HTML

<div class="tooltip">Design Interativo, simples assim</div>

Veja como ficou: tooltip  

Simples assim, mas como isso funciona? Bom o triângulo é formado pela borda que criamos no nosso CSS na classe .tooltip:before  temos sempre que dizer que a altura e largura tenham tamanho de 0px, a quantidade de pixels que colocamos na borda é o que ira dizer qual o tamanho do triangulo, o elemento border-right-color cria o formato, a ponta do triângulo sempre está oposta ao lado do elemento, então se queremos que a seta aponte para a direita escrevemos border-left-color, se quisermos que a ponta fique para cima colocamos border-bottom-color e assim sucessivamente. Com esta dica fica muito mais fácil criar elementos apenas utilizando códigos.

Pseudo-elemento :before ou :after

Em nosso exemplo utilizamos o pseudo-elemento :before você também pode utilizar o :after para quem não sabe esses elementos criam uma especie de <span> onde dizemos que todo os elementos que estão dentro do CSS desta classe fique dentro do elemento content:””; . Não irei me aprofundar nessa questão mas caso queira ler um texto detalhado sobre o tema acesse o link: http://tableless.com.br/como-usar-before-after/

Palheta de cor do site Netshoes

Talvez você tenha deparado com aquelas cores cortadas na diagonal para selecionar a cor do tênis no e-commerce Netshoes, e é claro que eles não fazem isso com imagens pois no sistema administrativo essa seleção deve ser fácil e rápida.    

cor

Mas com CSS é muito fácil fazer isso, e segue o mesmo principio do código anterior:

.paleta-cores {
  width: 0;
  height: 0;
  border: 50px solid;
  border-color: #f00 #000 #000 #f00;
}
<div class="paleta-cores"></div>

paleta-de-cores

 

A lógica é a mesma, alterando o tamanho do border nosso quadrado fica maior, e modificando o border-color podemos mudar as cores e a forma como são inseridas.

Agora é só utilizar esses exemplos e dar adeus aos arquivos de imagens com este formato em seus projetos.





Artigos Relacionados


Designer de Interface pós graduado em Arquitetura da Informação. UI/UX Designer e Front-end Developer, atualmente atendo empresas como freelancer e sou colaborador em uma agência de comunicação onde desenvolvo interfaces criativas com foco na experiência do usuário. Organizador por natureza acredito que o caos é a matéria-prima necessária.

2 comentários em “Criando Triângulos e Setas Apenas com HTML e CSS

  1. Wilhor pega mais que o pedrãããum 27 de maio de 2015 14:05

    Valeu manin me ajudo demais!!!!!!!!!! <3 s2 sz (L)

  2. Pedrao zika da balada pega todas as mina 3 de março de 2015 22:17

    Vlw me ajudou muito :)

Deixe o seu comentário

Seu endereço de email não será publicado.

Você pode usar HTML tags e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>