CSS arrows
HTML Part
CSS Part
.arrow-up { width: 0; height: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-bottom: 60px solid black; }
.arrow-down { width: 0; height: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-top: 60px 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: 60px solid transparent; border-bottom: 60px solid transparent; border-right:60px solid blue; }
Notes
If you want to decrease or increase size of arrows simply increase their border size and see result.
Comments
Post a Comment