How to make this arrow in CSS

Question

I have this next arrow in a layout, but I don’t want to make an image, but only with CSS. How do I do? I have to wear edges?

Answer 1

You can do it with CSS with two shapes, a rectangle and a triangle. And so you can put the size you want of 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>

^{Source of forms}

Answer 2

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 @Jorge B’s response, but does not need changes to the HTML by using pseudo-elements instead of two Divs}}.

Alternative: image embedded 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>

Answer 3

You can use a Unicode HTML (decimal or hexadecimal) to make the arrow, and be able to adapt the font size, colors, 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 see through w3schools

Answer 4

Another alternative to this, even if it’s not pure CSS, is to use webfonts icons like http://typicons.com/ They are completely customizable in CSS (color, size, opacity, etc.).