CSS Shapes & Clip-Path
Lesson 34 • Advanced Track
What You'll Learn
- Create circles, triangles, hexagons, stars, and arrows with clip-path
- Build angled hero sections and section dividers with polygon()
- Animate clip-path for reveal and morph effects
- Use shape-outside for text wrapping around non-rectangular shapes
- Understand the difference between clip-path and shape-outside
💡 Real-World Analogy
clip-path is like a cookie cutter — you place it over an element and only the shape you define is visible. The element is still full-size underneath; you're just controlling what's shown. shape-outside is like placing a shaped object on a newspaper — the text flows around the shape's contour.
Understanding clip-path
The clip-path property defines a clipping region that determines which parts of an element are visible. Anything outside the clipping path is hidden (but still exists in the DOM — it's not removed). This is purely visual, like masking.
There are three main clip-path functions: circle() for round shapes, ellipse() for ovals, and polygon() for any shape defined by coordinate pairs. Polygon is the most flexible — every point is defined as an x% y% pair.
Clip-Path Functions Reference
| Function | Syntax | Example |
|---|---|---|
| circle() | circle(radius at x y) | circle(50% at 50% 50%) |
| ellipse() | ellipse(rx ry at x y) | ellipse(40% 60% at 50% 50%) |
| polygon() | polygon(x1 y1, x2 y2, ...) | polygon(50% 0%, 0% 100%, 100% 100%) |
| inset() | inset(top right bottom left round radius) | inset(10% round 12px) |
| path() | path('SVG path string') | path('M0 0 L100 0...') |
1. Basic Clip-Path Shapes
Code Preview
<!DOCTYPE html>
<html><head><style>
body { font-family: system-ui, sans-serif; padding: 24px; background: #fafafa; }
.shapes { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.shape { width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 0.85rem; text-align: center; transition: transform 0.3s; cursor: pointer; }
.shape:hover { transform: scale(1.1); }
.circle { clip-path: circle(50%); backgrou
...2. Angled Heroes & Section Dividers
Code Preview
<!DOCTYPE html>
<html><head><style>
body { font-family: system-ui, sans-serif; margin: 0; background: #fafafa; }
.hero { position: relative; overflow: hidden; }
.hero-img { width: 100%; height: 300px; object-fit: cover; clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); display: block; }
.hero-overlay { position: absolute; bottom: 60px; left: 24px; color: white; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.hero-overlay h2 { margin: 0; font-size: 2rem; }
.hero-overlay p { margin: 4px 0 0; opacity:
...Animation rule: You can only smoothly transition between clip-path values that use the same function type with the same number of points. A circle() can transition to another circle(), and a 4-point polygon can morph to another 4-point polygon. Mismatched point counts cause an instant jump.
3. Animated Clip-Path Reveals
Code Preview
<!DOCTYPE html>
<html><head><style>
body { font-family: system-ui, sans-serif; padding: 24px; background: #fafafa; }
h2 { color: #1565C0; }
.reveal-container { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; margin: 24px 0; }
.reveal-card { width: 200px; height: 200px; border-radius: 12px; overflow: hidden; cursor: pointer; position: relative; }
.reveal-card img { width: 100%; height: 100%; object-fit: cover; clip-path: circle(0% at 50% 50%); transition: clip-path 0.6s ease;
...4. shape-outside for Text Wrapping
Code Preview
<!DOCTYPE html>
<html><head><style>
body { font-family: system-ui, sans-serif; padding: 24px; max-width: 700px; margin: 0 auto; }
h2 { color: #1565C0; }
.float-circle { float: left; width: 150px; height: 150px; border-radius: 50%; margin: 0 20px 10px 0; shape-outside: circle(50%); background: linear-gradient(135deg, #1976D2, #64B5F6); }
.float-polygon { float: right; width: 150px; height: 200px; margin: 0 0 10px 20px; shape-outside: polygon(0% 0%, 100% 0%, 100% 75%, 50% 100%, 0% 75%); clip-path:
...When to Use This
- Hero sections: Angled bottoms create visual interest and break up flat layouts
- Image galleries: Non-rectangular image frames (hexagons, circles) for creative portfolios
- Reveal animations: Circle-expanding reveals for page transitions or hover effects
- Magazine layouts: shape-outside wraps text around circular images for editorial design
- Section dividers: Diagonal or wavy transitions between page sections
Common Mistakes
- Clipped area is still clickable — Clip-path only hides visually. The element's hit area remains its full rectangular bounding box. Use
pointer-events: noneon hidden areas if needed. - Polygon points must be in order — Define vertices clockwise or counter-clockwise. Random order creates unexpected crossed shapes.
- Animating between different point counts — A triangle (3 points) can't smoothly morph to a hexagon (6 points). Add invisible duplicate points to match counts.
- Confusing clip-path with shape-outside —
clip-pathcontrols what's visible.shape-outsidecontrols how text wraps. They're independent — use both together for best results. - Forgetting overflow: hidden on parents — Clip-path on an image inside a container may still show overflow on the parent. Set
overflow: hiddenon the wrapper. - Performance with complex paths — Very complex polygons (20+ points) or animated clip-paths on many elements can cause repaint issues. Keep shapes simple.
🎉 Lesson Complete
- ✅
clip-path: circle(),ellipse(),polygon()create custom shapes - ✅ Polygon coordinates define vertices as
x% y%pairs - ✅ Clip-path can be animated between shapes with equal vertex counts
- ✅
shape-outsidewraps text around non-rectangular floated elements - ✅ Angled section dividers use polygon() for dramatic visual transitions
- ✅ Circle reveal animations expand from
circle(0%)tocircle(100%) - ✅ Clipped elements retain their full bounding box for click events
- ✅ Use
clip-path+shape-outsidetogether for matching visual and text flow
Sign up for free to track which lessons you've completed and get learning reminders.