Here is an example of an arrow with pure CSS which is supported by all web browsers.
How is it done? Quite simple really, check out the below code:
HTML
<div class="arrow">
<div class="line"></div>
<div class="point"></div>
</div>
.arrow {
width:120px;
}
.line {
margin-top:14px;
width:90px;
background:blue;
height:10px;
float:left;
}
.point {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 30px solid blue;
float:right;
}
CSS Arrows in different directions
You might be wondering, how do I create the arrows in different directions, don’t worry, we have you covered:
HTML
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
CSS
<code class="language-CSS"> .arrow-up { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid black; } .arrow-down { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #f00; } .arrow-right { width: 0; height: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 60px solid green; } .arrow-left { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right:10px solid blue; } </code
We hope you enjoyed this article!