The Crystal Header uses CSS shapes to create a pattern of intersecting triangles. The main class of "crystal" is applied to a div which has a width and height of 0. The position is absolute relative to the parent "crystal_container" so we can move the triangles around.
The triangles are created by combining a vertical border and horiztonal border, one of which is transparent giving a point. Experiment with the border thicknesses to get different size triangles and use the rgba values to change color and transparency. The position attributes can be switched around to snap triangles to the top, bottom, left or right as needed. Also z-index can be applied to any shape to push elements in front of one another.