How to create custom arrows for your website using HTML and CSS?

Last Updated : 22 Jun, 2020

Arrows are widely used in modern websites. These are mainly used for sliding images and change pages. Although there are many icons available for these arrows. Sometimes you need to design a custom image depending on the client’s requirement. Creating arrows using CSS has many benefits such as they do not affect the page loading time, also very beneficial for SEO providing custom touch to the website.

Approach: Creating an arrow using CSS is very simple. First, create an L(alphabet) shape using some box-shadow property and then rotate it to some angle to align them (both left and right arrows) together.

HTML Code: In this section, two div elements are created, one for each arrow.

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content= 
      "width=device-width, initial-scale=1.0" /> 
    <title>Arrow</title> 
</head> 
<body> 
    <div class="left"></div> 
    <div class="right"></div> 
</body> 
</html> 

CSS Code:

Step 1: First use box-shadow property to make the div element as L-shaped.
Step 2: Now rotate both of them at 45deg and -135deg angles to align them just opposite of each other.

Note: You can use some other values for the right arrow such as 225deg. You can find the perfect value of def using the developers console. You can also add hover effects depending on the requirement.

<style> 
    body { 
        padding: 280px 0 0 500px; 
        background: green; 
    } 
  
    .left, 
    .right { 
        width: 100px; 
        height: 100px; 
        transition: .5s; 
        float: left; 
        box-shadow: -2px 2px 0 black; 
    } 
  
    .left { 
        transform: rotate(45deg); 
    } 
  
    .right { 
        transform: rotate(-135deg); 
    } 
</style> 

Complete Code: It is the combination of the above two sections of codes.

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
  
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
  
    <title>Arrow</title> 
  
    <style> 
        body { 
            padding: 280px 0 0 500px; 
            background: green; 
        } 
  
        .left, 
        .right { 
            width: 100px; 
            height: 100px; 
            transition: .5s; 
            float: left; 
            box-shadow: -2px 2px 0 black; 
        } 
  
        .left { 
            transform: rotate(45deg); 
        } 
  
        .right { 
            transform: rotate(-135deg); 
        } 
    </style> 
</head> 
  
<body> 
    <div class="left"></div> 
    <div class="right"></div> 
</body> 
  
</html> 