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 - How to calculate CSS letter-spacing vs. “tracking” in typography? Photoshop/Illustrator to CSS

CSS / 4th January 2024

How to calculate CSS letter-spacing vs. “tracking” in typography? Photoshop/Illustrator to CSS

Read More Related - How To Create A Modern Scroll Down Animation Icon With CSS

CSS / 3rd January 2024

How To Create A Modern Scroll Down Animation Icon With CSS

Read More