WordPress / Web Development Tutorials
(Best WordPress Tutorials)

CSSHTMLJavaScriptjQueryMySQLPHPSilvaTechnologiesWooCommerceWordpress
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:

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!

 

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 and various other CMS frameworks. If you need responsive design, SEO, speed optimisation or anything else in the world of digital, you can contact Silva Web Designs here; [email protected]

It’s good to share

Join the discussion

Related Posts

Related - CSS – Indenting the second line of LI (List Items)

CSS / 25th September 2023

CSS – Indenting the second line of LI (List Items)

Read More Related - How To Add Line On Either Side Of Your Text Headers With CSS

CSS / 23rd September 2023

How To Add Line On Either Side Of Your Text Headers With CSS

Read More