You are currently viewing Animated Pyramid: CSS Tutorial (Day 20 of CSS3 in 30 Days)

Animated Pyramid: CSS Tutorial (Day 20 of CSS3 in 30 Days)

Create a small triangle that, once hovered over, animates into a pyramid comprised of several shapes!

⭐️Files you need ⭐️
💻Animated Pyramid Code:
💻All tutorials in this series need this “_theme-styles” directory (only download once):

This video works as a stand-alone tutorial but is also day 13 of CSS3 in 30 Days. For the rest of the series, check out this playlist:

CSS3 in 30 Days is developed by Brad Hussey. Check out his website for more great tutorials:

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:


This Post Has 18 Comments

  1. J_Net Reloaded

    problem is that if the screen size (resolution) is higher then it no longer looks like a normal triangle.

  2. Vishaal

    Just wow…. I'll definitely follow from now…

  3. Do you have this series in a playlist? If not, that would be very helpful – thanks. 🙂

    Edit: For anyone else who was wondering the playlist was placed in the video description. Thanks for your hard work freeCodeCamp.

  4. Tolumide

    great video. Howabout the :hover on the{}.What do you think?

  5. N1n741

    Thank you Brad! good idea. You're a genius man, had a good laugh also.

  6. Hi Brad, I am following this series for 2 weeks. And this is the first video that is beyond my comprehension. I couldn`t grasp it. I have a question why don`t you use predefined things like IDK how you hide the triangle parts but was it not possible by using visibility: hidden ???
    This kind of questions arise when I see this video.
    Kindly reply!

  7. Ishan Kesharwani

    I tried some of my understanding and tweaked code a little and it blew my mind. Not being pompous at all but the effect i got was amazing. Thanks for this BRAD !!!

  8. Anton Rich

    Oh, gosh, I thought it will a useless lesson. But it turns out to be excellent!

  9. Business Opportunity in Ruvol

    I have invented a Board Game [still unpublished and not yet out in the market] that I believe is guaranteed to be as challenging and exciting as CHESS. I called it “RUVOL.”

    It is my hope that one day Ruvol may surpass chess as the “Number One Board Game in the World.”

    The weakness of chess is it always starts in fixed positions that the opening moves become “memorizable.” In fact, not a few have so mastered the moves that they can play against their opponents “blindfolded.” It is for this very reason that the great Bobby Fischer introduced his so-called “Fischer Random Chess,” where the starting position of the pieces is “randomized” to make the memorization of openings impracticable. Fortunately, it is also for this reason that I invented Ruvol where “every game” has been calculated to be a challenging one to play.


    I detailed everything in my YouTube video. Here is the link:


    It is worthwhile to note that the people who play chess will be the same people who will play Ruvol. In my Google search, I learned there are around 800 million chess players in the world. Even just a small percentage of these 800 million is good enough to earn big money from Ruvol either as an ONLINE GAME BUSINESS or as a PHYSICAL PRODUCT DISTRIBUTOR.

    You may contact me at:

    Thanks and God bless!

    The Ruvol Inventor

Leave a Reply