Arrow with PureCSS

Click to Enlarge

Have you ever thought or seen a arrow in website which is not an image but created with the help of css ? So now,
we are going to learn how to make a arrow with purecss.
You can see arrows crafted with PureCSS3 in image above.

Arrow Left

.arrowleft {   position: relative;   height: 0px;   width: 0px;   border: 20px solid;   border-color:transparent #444 transparent transparent; }

Arrow Right

.arrowright {   position: relative;   height: 0px;   width: 0px;   border: 20px solid;   border-color:transparent transparent transparent #444; }

Arrow Top

.arrowtop {   position: relative;   height: 0px;   width: 0px;   border: 20px solid;   border-color:transparent transparent #444 transparent; }

Arrow Bottom

.arrowbottom {   position: relative;   height: 0px;   width: 0px;   border: 20px solid;   border-color:#444 transparent transparent  transparent; }

You can adjust arrow size with increase and decrease the size of border property which is now 20px.
If you want arrow placed at angle then you can use trasform property.

Over to You

If you wish to learn different shapes except arrow then drop your wishes in  Wish box.
If this article enjoy you a bit then feel free to leave a comment.
If you have any problem, your comment will have answer, just don't spam otherwise dustbin is there waiting for your spammy comment.