Triangles

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

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

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.