Arrow using css

Why use image, when you can create arrow with/without borders by using CSS
Below is the CSS code that helps you to create a triangle arrow


.arw-up {
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:10px solid black;

  border-left:20px solid transparent;
  border-right:20px solid transparent;
  border-top:20px solid #f00;
.arw-left {
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;  
  border-right:10px solid blue; 
  border-top:20px solid transparent;
  border-bottom:20px solid transparent;
  border-left: 20px solid #FCD000;

You can use any block level elements or even psuedo elements like before and after to create the arrows; it’s up to you.


See the Pen CSS arrow by (@webstuff) on CodePen.0

Some tweaks:
There are some tweaks where you can use a single arrow &  CSS rotate property to create the different directions of the arrow by just changing the degree in rotate property

-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
/*change the degree according to your need*/

Arrow with borders:
Even you can add border around it by using pseudo elements like before/after and by absolute positioning around the arrow.

/*arrow with borders*/
.brd:before{content: '';
display: block;
position: absolute;
top: -34px;
width: 29px;
height: 28px; 
background: transaprent;
border-right:1px solid #000;
border-bottom:1px solid #000;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);  

2 Replies to “Arrow using css”

  1. Ahaa, its good conversation regarding this article here at this blog, I have read all that, so at this time me
    also commenting at this place.

  2. I read this component of writing completely concerning the comparison of hottest and preceding technologies, it’s amazing article.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.