robsonmoulin@gmail.com
(11) 9.8655-2539

Criando Triângulos e Setas Apenas com HTML e 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

Design Interativo, simples assim
 

Veja como ficou:   

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.    

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;
}
 
 

 

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.

publicidade
publicidade
publicidade

Agora que você terminou de ler esse artigo

Que tal visitar nosso portfólio ou conhecer todas as soluções que oferecemos para você.