Criando Triângulos e Setas Apenas com HTML e CSS

Criando Triângulos e Setas Apenas com HTML e CSS

Publicado em 31 mar 2017

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.

Gostou desse artigo? Dá uma forcinha!
A única forma que consigo remunerar meu site é através de anúncios, não esqueça de conferir!




Deixe o seu comentário