|
1 | | -<ComingSoon /> |
| 1 | +--- |
| 2 | +title: "The clip-path Property" |
| 3 | +description: "Learn how to use the CSS clip-path property to clip an element to a specific shape (circle, polygon, inset), creating complex, non-rectangular designs." |
| 4 | +keywords: [CSS clip-path, clipping, shape-masking, polygon, circle, inset, transitions] |
| 5 | +tags: [CSS clip-path, clipping, shape-masking, polygon, circle, inset, transitions] |
| 6 | +sidebar_label: "clip-path" |
| 7 | +--- |
| 8 | + |
| 9 | +The `clip-path` property allows you to define a specific geometric shape that an element's content should be clipped to. Only the part of the element that is inside the shape is visible; everything outside is completely cut off. |
| 10 | + |
| 11 | +This powerful property moves CSS beyond the constraints of the rectangular box model, enabling the creation of custom, dynamic shapes for images, containers, and interactive elements. |
| 12 | + |
| 13 | +<AdsComponent /> |
| 14 | +<br /> |
| 15 | + |
| 16 | +## 1. Core Concept |
| 17 | + |
| 18 | +`clip-path` uses various shape functions to define a clipping region. Anything outside this region is treated as transparent and non-interactive. |
| 19 | + |
| 20 | +### `clip-path` vs. `overflow: hidden` |
| 21 | + |
| 22 | +* **`overflow: hidden`:** Hides content that exceeds the rectangular boundaries of the element's box. The box itself remains a rectangle. |
| 23 | +* **`clip-path`:** Changes the *visible shape* of the element itself, even if the content remains within the original box's boundaries. The element's background, borders, and content are all clipped to the shape. |
| 24 | + |
| 25 | + |
| 26 | +## 2. Supported Shape Functions |
| 27 | + |
| 28 | +`clip-path` accepts several built-in shape functions, with `polygon()` being the most versatile. |
| 29 | + |
| 30 | +### 2.1. `inset()` (The Rounded Rectangle) |
| 31 | +Clips the element inward from its edges. This is similar to a padded box, but it clips the visual output. |
| 32 | + |
| 33 | +```css title="styles.css" |
| 34 | +/* Clips 10px from top, 20px from right, 30px from bottom, 40px from left */ |
| 35 | +clip-path: inset(10px 20px 30px 40px); |
| 36 | + |
| 37 | +/* Can also be combined with border-radius */ |
| 38 | +clip-path: inset(10% round 15px); |
| 39 | +``` |
| 40 | + |
| 41 | +### 2.2. `circle()` |
| 42 | + |
| 43 | +Clips the element to a circular shape. |
| 44 | + |
| 45 | +```css title="styles.css" |
| 46 | +/* Creates a circle with a radius of 50% centered at 50% 50% */ |
| 47 | +clip-path: circle(50% at 50% 50%); |
| 48 | +``` |
| 49 | + |
| 50 | +<AdsComponent /> |
| 51 | +<br /> |
| 52 | + |
| 53 | +### 2.3. `ellipse()` |
| 54 | + |
| 55 | +Clips the element to an oval shape, defined by two radii (X and Y). |
| 56 | + |
| 57 | +```css title="styles.css" |
| 58 | +/* Creates an ellipse with horizontal radius 30% and vertical radius 40%, centered at 50% 50% */ |
| 59 | +clip-path: ellipse(30% 40% at 50% 50%); |
| 60 | +``` |
| 61 | + |
| 62 | +### 2.4. `polygon()` (Custom Shapes) |
| 63 | + |
| 64 | +This is the function used for complex and custom shapes. It requires a list of coordinates (X Y pairs) that define the vertices (corners) of the shape. Coordinates are relative to the top-left corner of the element (0% 0%). |
| 65 | + |
| 66 | +```css title="styles.css" |
| 67 | +/* Creates a basic downward arrow shape */ |
| 68 | +clip-path: polygon( |
| 69 | + 50% 0%, /* Top Center */ |
| 70 | + 100% 100%, /* Bottom Right */ |
| 71 | + 0% 100% /* Bottom Left */ |
| 72 | +); |
| 73 | +``` |
| 74 | + |
| 75 | +## 3. Animating with `clip-path` |
| 76 | + |
| 77 | +One of the most powerful uses of `clip-path` is for transitions and animations. As long as the two states (start and end) have the same number of points in their `polygon()` definitions, the browser can smoothly interpolate between the shapes. |
| 78 | + |
| 79 | +### Example: Rectangle to Starburst |
| 80 | + |
| 81 | +```css title="styles.css" |
| 82 | +.starburst-box { |
| 83 | + /* Starting shape: a simple rectangle (4 points) */ |
| 84 | + clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); |
| 85 | + transition: clip-path 0.5s ease; |
| 86 | +} |
| 87 | + |
| 88 | +.starburst-box:hover { |
| 89 | + /* Ending shape: A starburst/diamond shape (4 points) */ |
| 90 | + clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); |
| 91 | +} |
| 92 | +``` |
| 93 | + |
| 94 | +:::warning Point Count is Key |
| 95 | +If you are transitioning between two `polygon()` shapes, they **must** define the same number of coordinates. For instance, transitioning from a triangle (3 points) to a hexagon (6 points) will typically fail or produce unpredictable results. |
| 96 | +::: |
| 97 | + |
| 98 | +<AdsComponent /> |
| 99 | +<br /> |
| 100 | + |
| 101 | +## 4. Interaction Caveats |
| 102 | + |
| 103 | +When you clip an element, the invisible clipped area is also **non-interactive**. |
| 104 | + |
| 105 | +If you clip an image into a circle, only the pixels within the circle will respond to mouse events (like `click` or `hover`). The corners of the original rectangle, though still technically taking up space in the layout, are completely inert. |
| 106 | + |
| 107 | +This is a crucial difference from using transparent backgrounds, where the mouse still interacts with the full bounding box. |
| 108 | + |
| 109 | +## Interactive `clip-path` Demo |
| 110 | + |
| 111 | +Use the hover state to see a smooth transition between a square and a diamond/starburst shape using `polygon()`. |
| 112 | + |
| 113 | +<CodePenEmbed |
| 114 | + title="Interactive clip path Demo" |
| 115 | + penId="PwNazWm" |
| 116 | +/> |
0 commit comments