13

Tenho essa seguinte flecha em um layout, mas não quero fazer uma imagem e sim só com CSS. Como faço? tenho que usar bordas?

inserir a descrição da imagem aqui

4 Respostas 4

18

Podes fazer com CSS com duas formas, um retângulo e um triângulo. E assim podes por o tamanho que quiseres da seta.

 #triangle-right 
 { 
     width: 0;
     height: 0; 
     border-top: 50px solid transparent;    /* tamanho do topo ao meio */
     border-left: 75px solid red;           /* comprimeto da seta      */
     border-bottom: 50px solid transparent; /* tamanho do meio a baixo */
     margin-left:100px;                     /* comprimento da cauda    */
 }
 #rectangle 
 { 
     width: 100px;                          /* comprimento da cauda */
     height: 50px;                          /* largura da cauda     */
     background: red; 
     position: absolute; 
     margin-top:25px;                       /* metade da largura para ficar centrado*/
 }
<div>
  <div id="rectangle"></div>
  <div id="triangle-right"></div>
</div>

Fonte das formas

5
  • 2
    @FelipeStoker, se queres exactamente a seta como tens, esta é a melhor solução. A do Bacco porém, não é afetada por css's caso queiras aplicar, muito por definir uma imagem de fundo. +1 Commented 24/11/2014 às 11:08
  • 2
    Exemplo igual a que pediste jsfiddle.net/wwjpwd3m/1
    – Jorge B.
    Commented 24/11/2014 às 11:20
  • 1
    Vocês são nota 10! Era exatamente o que eu queria! Commented 24/11/2014 às 16:21
  • @JorgeB. tem como eu colocar uma borda? vi que se eu colocar, ele deixa quadrado. Commented 25/11/2014 às 11:08
  • Queres uma borda ao redor da seta toda?
    – Jorge B.
    Commented 25/11/2014 às 11:10
11

Podes usar um HTML unicode (decimal ou hexadecimal) para fazer a seta, e poder adaptar o tamanho da fonte, cores, etc etc, com o css:

    <p style="font-size:40px;">&rarr;<p>
    <p style="font-size:20px; color:red;">&#8594<p>

Exemplo LINK

Para mais exemplos, podes ver através do w3schools

2
  • No meu browser (Chrome/OSX) os caracteres não são exibidos. Mas quando eu copiei e colei num editor de texto, apareceram. ???
    – bfavaretto
    Commented 24/11/2014 às 19:49
  • @bfavaretto, talvez seja problema de plataforma, não sei. Em ambiente windows funciona nos 3 browsers, acho muito estranho que isso te aconteça Commented 25/11/2014 às 9:20
11

Sem imagem, sem alteração no HTML:

Usando bordas dá pra improvisar apenas com CSS, sem precisar de imagem nenhuma:

.flecha::after {
  display:block;
  position:absolute;
  content:'';
  left:-26px;
  top:-3px;
  width: 20px;
  height: 6px;
  background:black;
}

.flecha {
  position:relative;
  margin-left:20px;
  width: 0; 
  height: 0; 
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid black;
}
<div class="flecha"></div>

Edit: a lógica é parecida com a da resposta do @Jorge B., mas não precisa de alterações no HTML, pelo uso dos pseudo-elementos em vez de duas DIVs.


Alternativa: imagem embutida no CSS


Se o problema de ter uma imagem é o recurso externo, em vez de linkar a imagem, dá pra usar um data URI:

.flecha {
   width: 26px;
   height: 12px;
   background-repeat: no-repeat;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAMCAYAAAB8xa1IAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzU4Qjk5RDY3M0M3MTFFNEE1NTBBQjM3QUM2QUY2RTAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzU4Qjk5RDc3M0M3MTFFNEE1NTBBQjM3QUM2QUY2RTAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozNThCOTlENDczQzcxMUU0QTU1MEFCMzdBQzZBRjZFMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozNThCOTlENTczQzcxMUU0QTU1MEFCMzdBQzZBRjZFMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pjn3yM0AAAElSURBVHjatFQ7boNAEB1g+SMhkGUJqtQpkjrXyB1cWEi+gbsU6aMUlnwb+wT2BXwIpCBYlrxZeR0rpYGRRsuMYN6b4e1YURSRUoosy6JHzfM8/f0wDBw++b5/MfU4xy5oAmuaRpNl67ruE+S9LMve+7434OS4rquDMR3Ztk2O4+gTtZ7btl3jlHEcH5iA6WjBgHD1KJBhzWQB5nMndV1/IA7SNN0CWLP54XeRnMy5nvEkSbZlWRLPC3Dk0owWhuHOBgNJMxtGu6T/rU7tUOB3URQkgiB4hTIEANVY5kwa8l5JKSuOAbKHzCvkSEAMJ6OYiexyBfnK83zDIFre5uaO/Ae3C4tu3jClIzrZ4PlP+mNWkCkihLhfQS9Q2RmTGu5X0K8AAwD5DrixhRb2XAAAAABJRU5ErkJggg==);
}
<div class="flecha"></div>

2
  • o que é esse background-image? Commented 24/11/2014 às 11:04
  • é a imagem que usas no fundo, neste caso, da tua div flecha.
    – Jorge B.
    Commented 24/11/2014 às 11:08
3

Outra alternativa para isso, mesmo que não seja CSS puro é utilizar ícones webfonts como o http://typicons.com/ Eles são completamente personalizáveis em CSS (cor, tamanho, opacidade, etc.).

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .