Topic 28 of 30
Clip-path & CSS Shapes
Overview
clip-path clips an element to a defined shape, hiding content outside the path. CSS shapes flow text around non-rectangular elements. Together they enable creative section dividers, avatar shapes, and editorial layouts.
Syntax
css
/* Geometric clip paths */
clip-path: circle(50%); /* circle avatar */
clip-path: ellipse(60% 40% at 50% 50%); /* ellipse */
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); /* angled */
clip-path: inset(10px 20px 10px 20px round 8px); /* rounded */
/* Diagonal section */
.hero {
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}
/* CSS Shapes — text wraps around shape */
.avatar {
float: left;
shape-outside: circle(50%);
clip-path: circle(50%);
margin: 0 20px 0 0;
}
/* SVG-based clip path */
clip-path: url(#myClipPath);Common Pitfalls
- clip-path clips both the element AND its box-shadow — use filter: drop-shadow() instead of box-shadow for clipped elements.
- clip-path: polygon() coordinates are percentage-based by default — test on different screen sizes.
- Interview tip: Animating clip-path between two polygon() shapes with the same number of points creates smooth morphing effects.
Real-World Example
Diagonal section dividers and hexagonal avatar for a profile page:
example
css
/* Diagonal hero section */
.hero-section {
background: linear-gradient(135deg, #0f0f0f, #1a1a1a);
clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
padding-bottom: 120px;
}
/* Hexagonal avatar */
.hex-avatar {
width: 120px;
height: 120px;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
object-fit: cover;
}
/* Animated clip on hover */
.card-image {
clip-path: inset(0 0 0 0 round 12px);
transition: clip-path 0.3s ease;
}
.card:hover .card-image {
clip-path: inset(0 0 0 0 round 24px);
}
/* Wavy section divider */
.wavy-divider {
clip-path: ellipse(55% 60% at 50% 100%);
height: 100px;
background: #FFD700;
margin-top: -50px;
}