CSS clip-path 可創(chuàng)建獨(dú)特形狀和響應(yīng)式設(shè)計(jì)，1. 使用 circle()、ellipse()、inset() 和 polygon() 創(chuàng)建基礎(chǔ)形狀；2. 用 polygon() 制作六邊形等圖像遮罩；3. 結(jié)合視口單位實(shí)現(xiàn)響應(yīng)式波浪邊；4. 通過(guò) transition 實(shí)現(xiàn)懸停動(dòng)畫(huà)；5. 常用于頭像、英雄區(qū)域、畫(huà)廊和按鈕，需注意瀏覽器兼容性并添加 -webkit- 前綴以確保支持，最終效果優(yōu)雅降級(jí)，使用簡(jiǎn)單代碼實(shí)現(xiàn)豐富視覺(jué)效果。

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 (e.g., 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.

  以上是CSS剪輯路徑示例的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！