CSS clip-path creates unique shapes and responsive designs. 1. Use circle(), ellipse(), inset() and polygon() to create basic shapes; 2. Use polygon() to create image masks such as hexagons; 3. Use viewport units to implement responsive wave edges; 4. Use transition to realize hover animation; 5. It is often used in avatars, hero areas, galleries and buttons. Pay attention to browser compatibility and add -webkit- prefix to ensure support. The final effect is elegantly downgraded, and use simple code to achieve rich visual effects.

CSS clip-path is a powerful property that lets you cut out specific parts of an element, showing only the clipped area. It's great for creating unique shapes, responsive designs, or creative image masks. Here are some practical and commonly used clip-path examples with code you can copy and use.

1. Basic Shape Examples

You can use predefined shape functions like inset() , circle() , ellipse() , and polygon() .

? Circle Clip

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

This creates a perfect circular clip — ideal for profile pictures.

? Ellipse Clip

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

Creates an oval shape. Adjust the horizontal and vertical radii for different proportions.

? Inset (Rectangular with Rounded Edges)

 .inset-rounded {
  clip-path: inset(10% round 20%);
}

Cuts from each edge (10%) and rounds the corners (20%). Useful for cards with soft edges.

? Polygon (Custom Shapes)

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

Creates a triangle pointing upward. You can define any shape using x/y coordinates.

2. Creative Image Masks

Use clip-path to turn images into non-rectangular designs.

 <img class="hexagon lazy"  src="/static/imghw/default1.png"  data-src="portrait.jpg"  alt="Hexagon image">

 .hexagon {
  clip-path: polygon(
    25% 0%, 
    75% 0%, 
    100% 50%, 
    75% 100%, 
    25% 100%, 
    0% 50%
  );
}

This creates a hexagon shape — popular in galleries or avatars.

? Tip: Use online tools like Clippy to generate complex polygon() paths visually.

3. Responsive Design with Viewport Units

Make clipped shapes scale with the screen size.

 .wave-bottom {
  clip-path: polygon(
    0% 0%, 
    100% 0%, 
    100% 90%, 
    50% 100%, 
    0% 90%
  );
}

Use this on a section to create a wave-like bottom edge — common in modern hero sections.

You can even animate it:

 @keyframes wave-clip {
  0% { clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%); }
}

.wave-animate {
  animation: wave-clip 3s infinite alternate ease-in-out;
}

4. Interactive Hover Effects

Create engaging hover transitions.

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

.card:hover {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

On hover, the irregular shape snaps to a rectangle — subtle but effective.

?? Note: Always include transition for smooth animations. Not all clip-path changes animate perfectly, especially between different functions (eg, circle → polygon ), so stick to same-type shapes.

5. Practical Use Cases

• Avatars and icons : Circular or hexagonal profile images.
• Hero sections : Unique section borders without extra SVGs.
• Image galleries : Non-rectangular, artistic layouts.
• Call-to-action buttons : Custom-shaped buttons (though use carefully for accessibility).

Browser Support & Fallbacks

Most modern browsers support clip-path , but:

• Safari requires -webkit-clip-path for some older versions.
• For complex shapes, prefix with -webkit- :

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

  No support? The element will just show fully — so it degrades gracefully.

  ---

  Basically, clip-path opens up creative layout possibilities with minimal code. Start with simple shapes, test in your target browsers, and experiment with polygons for custom designs.

  The above is the detailed content of css clip-path examples. For more information, please follow other related articles on the PHP Chinese website!