[CSS] Drawing Triangles

[dday9]

The process of drawing a triangle using only CSS is basically a hack. The way that it works is that imagine that you have a box and the box has borders:


Notice how each border is cutoff by the next at an angle? Well if you were to shrink the size of said box to 0x0 but keep the size of the borders, they would each meet for a collection of triangles making up a box:


To get the desired arrow direction, you would make the background color of the box to transparent and all undesired borders transparent as well. If you wanted to have large triangles, then you would make the border size a larger value. If you wanted to have small triangles, then you would make the border size a smaller value. If you wanted to have the triangles be positioned in a diagonal direction rather than a horizontal/vertical direction or have different style triangles(Scalene or Isosceles) then you'd make one or more of the border sizes smaller than the others.

The following code demonstrates the concept of drawing triangles only using CSS:

Markup

<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>

Styling

div {
  background-color: transparent;
  height: 0px;
  width: 0px;
  
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid transparent;
}

.bottom {
  border-bottom-color: red;
}

.left {
  border-left-color: yellow;
}

.right {
  border-right-color: blue;
}

.top {
  border-top-color: green;
}

Fiddle: http://codepen.io/anon/pen/ZOYxaw