What it is: clip-path cuts an element into a shape. Everything outside the shape becomes invisible. You can make circles, triangles, diagonal sections and any polygon without editing the image.

Basic shapes

.lotgrafix-circle {
    clip-path: circle( 50% );
}

.lotgrafix-ellipse {
    clip-path: ellipse( 50% 35% at 50% 50% );
}

.lotgrafix-rounded {
    clip-path: inset( 0 round 20px );
}

.lotgrafix-triangle {
    clip-path: polygon( 50% 0, 0 100%, 100% 100% );
}

.lotgrafix-diamond {
    clip-path: polygon( 50% 0, 100% 50%, 50% 100%, 0 50% );
}

Diagonal section divider

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

Image reveal on hover

Shapes can be animated as long as both states have the same number of points.

.lotgrafix-reveal {
    clip-path: circle( 0% at 50% 50% );
    transition: clip-path 0.6s ease;
}

.lotgrafix-reveal:hover {
    clip-path: circle( 75% at 50% 50% );
}

Morph between two polygons

.lotgrafix-shape {
    clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% );
    transition: clip-path 0.4s ease;
}

.lotgrafix-shape:hover {
    clip-path: polygon( 10% 0, 100% 0, 90% 100%, 0 100% );
}

Important notes

• clip-path also cuts shadows and focus outlines. Apply a filter: drop-shadow() to a parent wrapper if you need a shadow.
• Use a visual tool to generate polygon points instead of calculating them by hand.
• A newer shape() function exists for curves. Check browser support before using it.