WordPress / Web Development Tutorials
(Best WordPress Tutorials)

Silva Web Designs - Blog

How to make an arrow with a point using divs and CSS

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:


<div class="arrow">

<div class="line"></div>
<div class="point"></div>


.arrow {

.line {
.point {    
    width: 0;
    height: 0; 
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 30px solid blue;

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:


<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>


<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; 

We hope you enjoyed this article!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Join the discussion

Related Posts

Related - How to Hide / Disable the WordPress Admin Bar

Wordpress / 22nd January 2021

How to Hide / Disable the WordPress Admin Bar

Read More Related - How to Limit Text Length to X Lines Using CSS

CSS / 23rd December 2020

How to Limit Text Length to X Lines Using CSS

Read More