CSS Triangle | Triangle CSS supported in HTML 5 and CSS3

You can make them with a single div. The following is a basic and most common Border Radius CSS properties, which is supported all the latest browser.

1. Up Arrow (<div class=”up-arrow”></div>)

.up-arrow {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid black;
}

2. Down Arrow (<div class=”down-arrow”></div>)

.down-arrow {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 50px solid #f00;
}

3. Left Arrow (<div class=”left-arrow”></div>)

.left-arrow {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 50px solid blue;
}

4. Right Arrow (<div class=”right-arrow”></div>)

.right-arrow {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid green;
}

You can customize this code further as per your requirement.

Example

Below are one of the example of Up Direction CSS Triangle, using :before pseudo-element in heading tag creating the triangle.

h1 {
  position: relative;
}

h1:before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #ff0000;
    bottom: -22px;
    left: 0;
}

Triangle shape using CSS

You can customize this code further as per your requirement.