CSS Clip-Path Practice Questions with Solutions

By /

Introduction

CSS clip-path allows you to create custom visible shapes by clipping an element to a defined region. Instead of displaying the complete rectangular box, you can create circles, polygons, triangles, and other shapes using functions such as circle(), ellipse(), inset(), and polygon(). It is useful for creative image designs, cards, banners, profile pictures, and modern website layouts. In this chapter, you’ll practice clip-path through simple solved questions. CSS Clip-Path Practice Questions with Solutions help to understand the concepts.

Question 1: Create a Circle

Problem Statement

Write CSS to clip an image into a circular shape.

CSS Code

img {
    clip-path: circle(50%);
}

Output

The image is displayed as a circle.

Explanation

  • clip-path defines the visible region of the element.
  • circle(50%) creates a circular clipping area.
  • The rest of the image outside the circle is hidden.

Question 2: Create a Smaller Circle

Problem Statement

Write CSS to create a circular clipping area with a radius of 40%.

CSS Code

img {
    clip-path: circle(40%);
}

Output

Only the area inside the 40% radius circle remains visible.

Explanation

  • circle() defines a circular clipping shape.
  • A smaller percentage creates a smaller visible region.
  • The content outside the clipping path is hidden.

Question 3: Create an Ellipse

Problem Statement

Write CSS to clip an image into an elliptical shape.

CSS Code

img {
    clip-path: ellipse(50% 40%);
}

Output

The image is clipped into an ellipse.

Explanation

  • ellipse() accepts horizontal and vertical radii.
  • 50% defines the horizontal radius.
  • 40% defines the vertical radius.

Question 4: Create a Triangle

Problem Statement

Write CSS to clip an element into a triangular shape.

CSS Code

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

Output

The element appears as a triangle.

Explanation

  • polygon() creates a custom shape using coordinate points.
  • 50% 0% represents the top point.
  • 0% 100% represents the bottom-left point.
  • 100% 100% represents the bottom-right point.

Question 5: Create a Diamond Shape

Problem Statement

Write CSS to clip an element into a diamond shape.

CSS Code

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

Output

The element appears as a diamond shape.

Explanation

  • polygon() connects the specified points.
  • The four points represent the top, right, bottom, and left positions.
  • The resulting shape looks like a diamond.

Question 6: Create an Inset Rectangle

Problem Statement

Write CSS to create an inset clipping area with 20px spacing from each edge.

CSS Code

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

Output

The visible area is reduced by 20px from each side.

Explanation

  • inset() creates an inset rectangular clipping region.
  • 20px applies the same inset to the top, right, bottom, and left.
  • The content outside the clipping region becomes invisible.

Question 7: Create a Rounded Inset Shape

Problem Statement

Write CSS to create an inset clipping area with 20px spacing and 20px rounded corners.

CSS Code

.box {
    clip-path: inset(20px round 20px);
}

Output

The element is clipped into an inset rectangle with rounded corners.

Explanation

  • inset(20px) creates equal spacing around the clipping area.
  • round 20px rounds the corners of the clipping path.
  • This can create card-like visual shapes without changing the element’s actual box.

Question 8: Create a Hexagon

Problem Statement

Write CSS to clip an element into a six-sided hexagon.

CSS Code

.hexagon {
    clip-path: polygon(
        25% 0%,
        75% 0%,
        100% 50%,
        75% 100%,
        25% 100%,
        0% 50%
    );
}

Output

The element appears as a hexagon.

Explanation

  • polygon() allows you to define custom shapes.
  • Six coordinate points create the six sides.
  • Changing the coordinates changes the shape.

Question 9: Position a Circle Using at

Problem Statement

Write CSS to create a circular clipping area positioned toward the top-right of an element.

CSS Code

.image {
    clip-path: circle(35% at 75% 25%);
}

Output

A circular region appears toward the top-right area of the element.

Explanation

  • 35% defines the circle’s radius.
  • at 75% 25% positions the circle.
  • The first percentage controls the horizontal position.
  • The second percentage controls the vertical position.

Question 10: Create a Creative Image Shape

Problem Statement

Write CSS to clip an image into an irregular polygon shape.

CSS Code

.image {
    clip-path: polygon(
        10% 0%,
        90% 10%,
        100% 80%,
        60% 100%,
        15% 85%,
        0% 30%
    );
}

Output

The image appears inside a custom irregular shape.

Explanation

  • polygon() allows you to create custom clipping shapes.
  • Each coordinate represents a point along the clipping path.
  • This technique is useful for creative hero images, banners, portfolios, and modern UI designs.

Key Takeaways

  • clip-path defines a visible clipping region for an element.
  • circle() creates circular clipping shapes.
  • ellipse() creates elliptical shapes.
  • inset() creates rectangular clipping regions.
  • polygon() creates custom shapes using coordinate points.
  • round can create rounded corners with an inset clipping path.
  • at can control the position of circular or elliptical clipping shapes.
  • clip-path is useful for creative image and UI designs.
  • Content outside the clipping path is visually clipped.
  • Changing clip-path does not change the original image file.

Frequently Asked Questions (FAQs)

1. What is CSS clip-path?

clip-path is a CSS property that defines which portion of an element remains visible.

Example:

img {
    clip-path: circle(50%);
}

2. How do I create a circle using clip-path?

Use the circle() function:

img {
    clip-path: circle(50%);
}

3. How do I create a triangle?

Use polygon() with three coordinate points:

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

4. What is the purpose of polygon()?

polygon() creates custom clipping shapes by connecting multiple coordinate points.

5. What does inset() do?

inset() creates a rectangular clipping region inset from the element’s edges.

Example:

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

6. Can clip-path be used with images?

Yes. It is commonly used to create circular, polygonal, triangular, and other custom image shapes.

7. Does clip-path permanently change an image?

No. It only changes how the element is displayed in the browser. The original image file remains unchanged.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top