Clipping and Masking

✂️ The Magic Scissors: CSS Clipping and Masking

Imagine you have a photo, but you only want to show part of it—like cutting a shape from paper. That’s exactly what clipping and masking do in CSS!

🎭 What’s the Big Idea?

Think of your webpage as a coloring book page. Now imagine you have:

• Magic scissors (clip-path) that cut shapes out perfectly
• Stencils (masks) that let paint through in some spots but not others

Both hide parts of an element—but they work differently!

✂️ The clip-path Property

What it does: Cuts your element into a shape—like using cookie cutters!

The Cookie Cutter Magic

.my-box {
  clip-path: polygon(50% 0%,
    100% 100%, 0% 100%);
}

This turns a square into a triangle! 🔺

Remember: Everything outside the shape becomes invisible—like it was cut away.

🔷 Polygon clip-path

What it is: Draw ANY shape by connecting dots!

Think of it like a connect-the-dots game. You tell CSS where to put each corner.

How Points Work

clip-path: polygon(
  0% 0%,      /* top-left */
  100% 0%,    /* top-right */
  100% 100%,  /* bottom-right */
  0% 100%     /* bottom-left */
);

This makes a rectangle (4 corners).

Make a Triangle

.triangle {
  clip-path: polygon(
    50% 0%,     /* top center */
    100% 100%,  /* bottom-right */
    0% 100%     /* bottom-left */
  );
}

3 points = 3 corners = triangle!

Make a Star ⭐

.star {
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%,
    68% 57%, 79% 91%, 50% 70%,
    21% 91%, 32% 57%, 2% 35%,
    39% 35%
  );
}

More points = more complex shapes!

⚪ Circle clip-path

What it is: Makes a perfect round shape!

.my-circle {
  clip-path: circle(50% at 50% 50%);
}

Breaking it down:

• 50% = radius (how big)
• at 50% 50% = center position

Small Circle on the Side

clip-path: circle(30% at 20% 50%);

• Smaller circle (30% radius)
• Positioned to the left

graph TD
    A["circle radius at x y"] --> B["radius = size"]
    A --> C["x = left-right"]
    A --> D["y = up-down"]

🥚 Ellipse clip-path

What it is: Like a circle but stretched—an oval!

.oval {
  clip-path: ellipse(40% 25% at 50% 50%);
}

Breaking it down:

• 40% = width radius (how wide)
• 25% = height radius (how tall)
• at 50% 50% = center position

Wide Oval

clip-path: ellipse(50% 20% at 50% 50%);

Super wide, not very tall!

Tall Oval

clip-path: ellipse(20% 50% at 50% 50%);

Super tall, not very wide!

📦 Inset clip-path

What it is: Cut away edges—like trimming photo borders!

.trimmed {
  clip-path: inset(10px 20px 10px 20px);
}

The numbers go clockwise:

1. Top = 10px trimmed from top
2. Right = 20px from right
3. Bottom = 10px from bottom
4. Left = 20px from left

With Rounded Corners

clip-path: inset(10% round 15px);

The round 15px adds smooth corners!

Shorthand

/* Same value all sides */
clip-path: inset(20px);

/* Vertical | Horizontal */
clip-path: inset(10px 30px);

🎨 CSS Masking

What it is: Uses images to show/hide parts—like a stencil!

The Spray Paint Analogy

Imagine holding a stencil over a wall and spray painting:

• Where stencil has holes = paint shows through
• Where stencil is solid = paint is blocked

With CSS masks:

• White parts of mask image = visible
• Black parts of mask image = hidden
• Gray parts = semi-transparent!

Basic Mask Example

.masked-element {
  mask-image: url('star-mask.png');
  mask-size: cover;
  mask-repeat: no-repeat;
}

Using Gradients as Masks

.fade-out {
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    transparent 100%
  );
}

This fades your element from visible to invisible!

Key Mask Properties

🆚 Clip-Path vs Mask: When to Use Which?

graph TD
    A["Need to hide parts?"] --> B{What kind of shape?}
    B -->|Simple geometry| C["Use clip-path"]
    B -->|Complex/Fading| D["Use mask"]
    C --> E["polygon, circle,<br>ellipse, inset"]
    D --> F["Images, gradients,<br>semi-transparency"]

Use clip-path when:

• You want simple shapes (circles, triangles, polygons)
• Sharp, clean edges

Use mask when:

• You need gradual fading
• Complex image-based shapes
• Semi-transparent effects

🎯 Quick Reference

💡 Pro Tips

1. Always add vendor prefixes for masks:

   -webkit-mask-image: url(mask.png);
   mask-image: url(mask.png);
   

2. Polygon helper: Use online tools to draw shapes and get the coordinates!

3. Performance: clip-path is usually faster than mask

4. Animations: Both can be animated for cool effects!

   .shape {
     transition: clip-path 0.3s ease;
   }
   

🎉 You Did It!

Now you know how to:

• ✂️ Cut shapes with clip-path
• 🔷 Draw any polygon with coordinates
• ⚪ Make circles and ovals
• 📦 Trim edges with inset
• 🎨 Create stencil effects with masks

You’re now a shape-cutting master! 🏆