Clip #box to a circle covering half its width.
Acceptance criteria
- 1.Clip #box to a circle covering half its width.
CSS Tutorial · CSS Effects
These 10 tasks go with the Clipping & Masking chapter. 5 of them ask you to build something small from scratch; 5 give you code that is already broken and ask you to work out why. Set aside about 90 minutes for the whole set, though you can do them in any order.
Nothing here is marked by a person. When you press Submit, the editor checks your code against the points listed under each task and tells you straight away what passed and what didn't (you need a free account to submit). If you get stuck, there are hints, and a worked solution once you've had a go. The first 2 tasks are free; the rest are part of the practice plan.
If it's been a while since you read the chapter, here is how it starts: “Control visible regions, alpha masks, and the contour around which inline content flows. The examples distinguish visible clipping, alpha masking, basic shapes, SVG paths, and shape-outside for text wrapping.” .
1.Clip to a circleexercise · easy · 10 min
Clip #box to a circle covering half its width.
Passes when: Clip #box to a circle covering half its width.
2.Clip with insetexercise · easy · 10 min · practice plan
Clip 10px off the top and bottom, 20px off the sides.
Passes when: Clip 10px off the top and bottom, 20px off the sides.
3.Clip to a triangleexercise · easy · 10 min · practice plan
Clip #box to a triangle using three polygon points.
Passes when: Clip #box to a triangle using three polygon points.
4.Clip to an ellipseexercise · easy · 10 min · practice plan
Clip #box to a 40% by 30% ellipse centred in the box.
Passes when: Clip #box to a 40% by 30% ellipse centred in the box.
5.Fade with a maskexercise · medium · 10 min · practice plan
Mask #box with a gradient from black to transparent.
Passes when: Mask #box with a gradient from black to transparent.
6.Fix the legacy propertybug fix · easy · 8 min
The modern property is clip-path.
Passes when: The modern property is clip-path.
7.Fix the missing unitbug fix · easy · 8 min · practice plan
inset() values need units.
Passes when: inset() values need units.
8.Fix the missing commasbug fix · easy · 8 min · practice plan
Polygon points are separated by commas.
Passes when: Polygon points are separated by commas.
9.Fix the missing position keywordbug fix · easy · 8 min · practice plan
An ellipse position is introduced with "at".
Passes when: An ellipse position is introduced with "at".
10.Fix shape-outside used to maskbug fix · easy · 8 min · practice plan
Fading an element out uses mask-image.
Passes when: Fading an element out uses mask-image.
Between them these tasks cover clip-path shapes, polygon() and Masking with gradients.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.