You can create triangle in your HTML web pages in pure CSS without requiring any JavaScript or images.

This one creates an isosceles triangle pointing downwards. Should come handy for creating speech bubbles.

<div class="triangle"></div>

<style>
  .triangle {
    border-top: 100px solid black;
    border-left: 100px dashed transparent;
    border-right: 100px dashed transparent;
    border-bottom: 0;
    display: block;
    overflow: hidden;
    width: 0;
    height: 0;
  }
</style>

And here’s another CSS snippet that generates a right angle triangle.

<div class="triangle"></div>

<style>
  .triangle {
    border-top: none;
    border-left: none;
    border-right: 100px dashed transparent;
    border-bottom: 100px solid black;
    display: block;
    overflow: hidden;
    width: 0;
    height: 0;
  }
</style>

You can combine 4 different-colored triangles and create a square box.

<div class="square"></div>

<style>
  .square {
    border-top: 100px solid #0099ff;
    border-left: 100px solid #ff9900;
    border-right: 100px solid #f6402d;
    border-bottom: 100px solid #8cc63e;
    display: block;
    overflow: hidden;
  }
</style>