How to create CSS triangles or arrow heads

CSS triangles (arrow heads) in various directions (up, down, left, right) can be created using a combination of thick CSS borders (visible and transparent) on a 0 size div element. Follow the following steps to create triangles using CSS.

  1. First we’ll create a 0 width/height div with thick borders of different colors. This way it will be easier to visualize that we can take a combination of these 4 borders and create desired triangle.
    <style type="text/css" media="screen">
    .onlyborders {
      width:0; height:0;
      border-top: 30px solid red;
      border-right: 30px solid blue;
      border-bottom: 30px solid green;
      border-left: 30px solid orange;
    }
    </style>
    
    <p>All 4 borders present</p>
    <div class="onlyborders"></div>
    refresh

  2. Now create a 0 width/height div with three borders (left, right and bottom). This will also help us visualize how borders appear when only three of them are present.
    <p>Only left, right and bottom borders present</p>
    <style type="text/css" media="screen">
    .onlyborders {
      width:0; height:0;
      border-right: 30px solid blue;
      border-bottom: 30px solid green;
      border-left: 30px solid orange;
    }
    </style>
    
    <div class="onlyborders"></div>
    refresh

  3. To create a triangle (say pointing up), we need to have bottom border visible and left and right border transparent. Similarly we can create other triangles.
    <style type="text/css" media="screen">
    .up {
      width:0; height:0;
      border-bottom: 30px solid green;
      border-right: 30px solid transparent;
      border-left: 30px solid transparent;
    }
    .down {
      width:0; height:0;
      border-top: 30px solid green;
      border-right: 30px solid transparent;
      border-left: 30px solid transparent;
    }
    .left {
      width:0; height:0;
      border-right: 30px solid green;
      border-top: 30px solid transparent;
      border-bottom: 30px solid transparent;
    }
    .right {
      width:0; height:0;
      border-left: 30px solid green;
      border-top: 30px solid transparent;
      border-bottom: 30px solid transparent;
    }
    </style>
    up<div class="up"></div><hr/>
    down<div class="down"></div><hr/>
    left<div class="left"></div><hr/>
    right<div class="right"></div><hr/>
    refresh
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments