robsonmoulin@gmail.com
11986552539

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

Deixe o seu comentário

Agora que você terminou de ler esse artigo

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