How to make this arrow in CSS

Navigation
12

I have this following arrow in a layout, but I do not want to make an image but only with CSS. How do I do? do I have to use borders?

    
asked by anonymous 24.11.2014 / 11:47

4 answers

18

You can do with CSS with two shapes, a rectangle and a triangle. And so you can by whatever size you want from the arrow. 

 #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>

Fountain of Forms

    
24.11.2014 / 12:00
11

You can use unicode HTML (decimal or hexadecimal) to make the arrow, and be able to adapt font size, colors, etc etc with css: 

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

Example LINK

For more examples, you can check out w3schools

    
24.11.2014 / 11:53
11

No image, no HTML change:

Using borders, you can improvise with CSS only, without needing any image: 

.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: The logic is similar to that of @Jorge B.'s response, but does not need HTML changes, by using pseudo-elements instead of two DIVs sub>.


Alternative: embedded image in CSS


If the problem of having an image is the external resource, instead of linking the image, you can use a 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>
    
24.11.2014 / 11:53
3

Another alternative to this, even if it's not pure CSS, is to use webfonts icons like the link They are completely customizable in CSS (color, size, opacity, etc.).

    
24.11.2014 / 19:50
How to dim the blue light on a website? How to remove a "href" from a tag with JQuery / JavaScript?