See the Pen Triangles by Katy DeCorah (@katydecorah) on CodePen

Iâ€™ve been into simple shapes lately. I found this interesting logo on Dribbble and decided to try it out.

I used one list item for each triangle. Each triangle has a pseudo element as its shaded triangle part. Each triangle has no width or height, instead itâ€™s shaped using border properties. I used the transform property with rotate and skew to massage each triangle into its correct orientation. (On a rainy day, Iâ€™d like to try to get the colors brighter and adjust the pseudo triangles to fit more appropriately.)

On hover the triangles become equilateral with a border-width set at 5em (and 1em for the pseudo triangles) and then I removed any trace of rotate or skew. I adjusted the positioning so that each triangle falls more elegantly.

Just bunch of simple shapes.