0Pricing
CSS Academy · Lesson

clip-path with polygon() and circle()

Clip elements into custom polygon or circle shapes using the clip-path property.

clip-path with polygon() and circle() is a free CSS Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What is clip-path?

clip-path clips the visible area of an element to a specified shape. Everything outside the shape is invisible (but still takes up space in the layout).

clip-path: circle()

Clip an element to a circular shape. The argument is the radius:

.avatar {
  clip-path: circle(50%);
  /* clips to a perfect circle */
}

.badge {
  clip-path: circle(40px at 50% 50%);
  /* 40px radius circle centered */
}

clip-path: ellipse()

Clip to an ellipse by specifying x-radius, y-radius, and optional center position:

.card-image {
  clip-path: ellipse(60% 40% at 50% 50%);
}

clip-path: polygon()

The most powerful clip-path. Define a polygon by listing x,y coordinate pairs:

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

.diagonal-cut {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
}

clip-path: inset()

Clip to a rectangle with optional rounded corners. Arguments are inset distances:

.card {
  clip-path: inset(0 0 20px 0 round 8px);
  /* clips bottom 20px, rounds corners */
}

Clip-path for Section Shapes

Create angled section transitions between page sections:

.section-diagonal {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
  padding-bottom: 80px;
}

Animating clip-path

clip-path with the same number of points can be transitioned for reveal and morph animations:

.reveal {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 600ms ease;
}

.reveal.visible {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

clip-path vs border-radius

For simple rounded shapes, border-radius is better — it works with background and border. Use clip-path when you need non-rectangular shapes that border-radius cannot achieve.

clip-path: path()

path() accepts an SVG path string for arbitrary shapes:

.star {
  clip-path: path("M150 0 L179 108 L287 108 L197 168 L228 276 L150 216 L72 276 L103 168 L13 108 L121 108 Z");
}

Performance Consideration

clip-path creates a new stacking context and may trigger paint on every frame when animated. Animating clip-path is more expensive than transform or opacity — combine carefully.

clip-path Reference Box

The coordinate system for clip-path is the element's border box (or margin box for SVG). Percentages are relative to the element's dimensions.

Quick Check

Which clip-path function creates an irregular non-rectangular shape defined by coordinate pairs?

Recap

clip-path clips elements to geometric shapes. circle() and ellipse() create rounded clips. polygon() defines any multi-vertex shape. inset() clips to a rectangle with optional rounding. Animate between polygon shapes with the same point count for dramatic reveals. Use path() for SVG-based arbitrary shapes.

Frequently asked questions

Is the “clip-path with polygon() and circle()” lesson free?

Yes — the full text of “clip-path with polygon() and circle()” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “clip-path with polygon() and circle()”?

Clip elements into custom polygon or circle shapes using the clip-path property. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “clip-path with polygon() and circle()” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. clip-path with polygon() and circle()
  2. shape-outside for Text Wrapping
  3. Animating clip-path Shapes
  4. CSS Masks vs Clip-path
← Back to CSS Academy