#CodePenChallenge: Triangles

New week, new #CodePenChallenge!

Last week, we bounced into the shapes challenge with circles. Browse through the Pens from the challenge in our #CodePenChallenge: Circles 🔵 collection.

February’s Challenge Sponsor: CodePen PRO

CodePen PRO combines a bunch of features that can help any front-end designer or developer at any experience level. You’ll be able to drag-and-drop to upload assets • Cross-browser test easier with no-login Debug View and Live View • Make anything private with the flip of a toggle • Collaborate in real time with Collab Mode • So much more.

Week Two Prompt: Triangles 🔺

This week we’re getting to the point of the shapes challenge with Triangles!

Your Challenge

Create a Pen that features triangles in an interesting way.

How to Participate

Create a Pen and tag it codepenchallenge and the weekly tag cpc-triangle. We’ll gather those Pens into a collection and share our favorites on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).

Ideas

  1. Show off your favorite way to make a triangle in the browser. Will you make it with CSS, SVG, or another technique?
  2. Have you heard of the Sierpinski triangle? It’s a fascinating fractal you can generate with JavaScript.
  3. Triangles are the root of the low-poly image style. Could you create an interesting image from triangles?

Resources

  1. Here are a couple of approaches to creating triangles in the browser: the classic border method, and the clip-path method.
  2. Feeling fractal-y? Study up on Sierpinski with Massimo’s Sierpinski triangle or Jarrod Thibodeau’s The Chaos Never Ends.
  3. Thinking about going the low-poly route? Check out Mikael Ainalem’s Ocean and Luke Reid’s Low Poly Landscape for inspiration.

The post #CodePenChallenge: Triangles appeared first on CodePen Blog.