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.

**Did you enjoy this post?**
Support RAICES. RAICES promotes justice by providing free and low-cost legal services to underserved immigrant children, families, and refugees.