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

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.