CSS clip-path explained with practical WordPress theme examples

Home » Coding » CSS clip-path explained with practical WordPress theme examples
April 5, 2022 Coding, CSS
CSS clip-path explained with practical WordPress theme examples

The CSS clip-path property lets you define a visible region for an element — anything outside that region is clipped away and becomes invisible. It is one of the most powerful layout and design tools in modern CSS because it lets you break out of the rectangular box model without resorting to SVG masks, transparent PNG overlays, or extra DOM elements. With clip-path you can create diagonal hero sections, polygon-shaped testimonial cards, circular and hexagonal avatars, and animated reveal effects, all in pure CSS. The property accepts several value types: inset() for rectangular clips with optional rounded corners, circle() and ellipse() for curved shapes, and polygon() for arbitrary multi-point shapes defined as a space-separated list of x/y coordinate pairs. You can also reference an SVG <clipPath> element with the url() syntax for complex shapes. Animating clip-path between two values with the same number of polygon points produces smooth morphing transitions entirely in CSS using transition or @keyframes. Browser support is excellent across all modern browsers; Internet Explorer is the only major exception, which is irrelevant for most new projects. In WordPress themes the most common uses are diagonal section dividers between the header hero area and the main content, shaped featured images in post grids, and animated image reveals on scroll. The Intersection Observer API guide shows how to trigger CSS transitions when an element enters the viewport — combine it with clip-path for scroll-reveal effects. Performance is excellent because clip-path is GPU-composited in modern browsers and does not trigger layout recalculation. Pair this with the CSS animations guide for advanced motion effects.

Problem: You want to create diagonal section dividers, shaped images, and animated reveal effects in a WordPress theme without extra markup, transparent PNGs, or SVG files.

Solution: Apply clip-path with polygon(), circle(), or inset() values directly on the elements you want to shape:

/* Diagonal hero section — slanted bottom edge */
.hero {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    background: #1a1a2e;
    padding: 6rem 2rem 8rem;
}

/* Hexagon avatar — six-point polygon */
.avatar-hex {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    width: 120px;
    height: 120px;
    object-fit: cover;
}

/* Circle crop — simpler than border-radius for non-square images */
.avatar-circle {
    clip-path: circle(50% at 50% 50%);
    width: 100px;
    height: 100px;
    object-fit: cover;
}

/* Animated reveal on scroll — add .is-visible via IntersectionObserver */
.reveal-image {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.7s cubic-bezier(0.77, 0, 0.18, 1);
}
.reveal-image.is-visible {
    clip-path: inset(0 0% 0 0);
}

/* Diagonal card with rounded inset */
.card-diagonal {
    clip-path: inset(0 0 0 0 round 0 0 3rem 0);
    overflow: hidden;
}

/* Morphing shape on hover — same number of points required */
.badge {
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    transition: clip-path 0.4s ease;
}
.badge:hover {
    clip-path: polygon(50% 5%, 95% 38%, 79% 95%, 21% 95%, 5% 38%);
}

NOTE: When using clip-path on images with object-fit: cover, set a fixed width and height on the image element rather than the container — the clip is applied to the element itself, not its parent. The polygon() coordinates use percentages relative to the element’s bounding box, so the shape scales automatically with the element. For the diagonal section pattern, adjust the third coordinate (e.g. 85%) to control how steep the angle is. In WordPress themes you can add these utility classes to your style.css and apply them directly in the block editor via the Additional CSS Class field on any block.

Related posts