The Challenge #1: The Winner

Remember, there were no real rules and scientifically-measurable correct answer to the problem — it comes down to balance of code and magic. We certainly got a bunch of fantastic solutions, so I’m going to show you the best handful.

--ADVERTISEMENT--

The Short-list

The most popular approach seemed to be the ‘border-radius/border-width’ solution, and Scott Kellum had one of the first and still best take on that one. Creating the triangle with border mitre-edges isn’t too difficult, but getting in and out of the triangle transition in a elegant way was the hard part.

As a big advocate of SVG, it was great to see an excellent SVG solution courtesy of Jeremy Karlsson. The SVG obviously changes the markup in this demo, but could be embedded as an image, object or CSS background. I think SVG might ultimately end up being be the best answer to this challenge.

You’ll see that Jeremy is using SVG’s <animate> functionality rather than CSS animation. It would be interesting to compare animation performance.

Simon Buerger is basing his solution on a reshaping CSS clip-path. You often see clip-path used with a ‘rectangle’, ‘circle’ or ‘ellipse’ values, but Simon is using the rarer ‘polygon’ value. Polygon takes a series of X Y values to create a mask shape.

That brings us to Praseetha KR’s entry, which I’m happy to select as the inaugural challenge winner! As I said earlier, Sharat’s solution was a similarly impressive animation. Praseetha’s solution is slightly smaller and more modular due to it’s SASS underpinnings. Lovely code.

Great work from Praseetha KR, and indeed everyone who offered a solution. I think it’s proved to be a great way to test yourself and learn from others.