CSS clip-path Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Basic page */
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f6f8ff 0%, #e8f0ff 100%);
    margin: 0;
}

/* Scene */
.scene {
    text-align: center;
    max-width: 360px;
}

/* Clipped image container */
.clipped {
    width: 360px;
    height: 240px;
    margin: 16px auto;
    box-shadow: 0 8px 24px rgba(20, 20, 50, 0.15);
    border-radius: 12px;
    overflow: hidden;
}

.clipped img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
    clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
    transition: clip-path 600ms cubic-bezier(.22,.9,.32,1), -webkit-clip-path 600ms cubic-bezier(.22,.9,.32,1), transform 600ms;
}

/* Hover to change shape */
.clipped:hover img {
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
    transform: scale(1.03);
}

/* Heading and paragraph */
.scene h2 {
    margin: 0;
    font-size: 18px;
    color: #0f1724;
}

.scene p {
    margin: 8px 0 0;
    color: #334155;
    font-size: 14px;
}
</style></head><body><div class="scene">
    <div class="clipped">
        <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=800&q=80" alt="Mountains and lake">
    </div>
    <p>Hover the image to change the clipping shape.</p>
</div></body></html>