Creative Blogging Tips | SeeBeeTee: 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 you enjoyed reading this article then please share it and feel free to leave a comment.