Skip to main content

Clipping & Masking — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Clipping & Masking lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Clip to a circle

    easy10 min

    Clip #box to a circle covering half its width.

  2. 2

    Clip with inset

    easy10 min

    Clip 10px off the top and bottom, 20px off the sides.

  3. 3

    Clip to a triangle

    easy10 min

    Clip #box to a triangle using three polygon points.

  4. 4

    Clip to an ellipse

    easy10 min

    Clip #box to a 40% by 30% ellipse centred in the box.

  5. 5

    Fade with a mask

    medium10 min

    Mask #box with a gradient from black to transparent.

Find the bug(5)

  1. 1

    Fix the legacy property

    easy8 min

    The modern property is clip-path.

  2. 2

    Fix the missing unit

    easy8 min

    inset() values need units.

  3. 3

    Fix the missing commas

    easy8 min

    Polygon points are separated by commas.

  4. 4

    Fix the missing position keyword

    easy8 min

    An ellipse position is introduced with "at".

  5. 5

    Fix shape-outside used to mask

    easy8 min

    Fading an element out uses mask-image.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace