css网页制作剪切

CSS 剪切效果实现方法

使用 clip-path 属性 clip-path 可以定义元素的可见区域，支持多种形状（圆形、多边形等）或 SVG 路径。例如裁剪为圆形：

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

使用 mask 属性 通过遮罩图像或渐变控制元素显示范围。例如使用线性渐变创建半透明遮罩：

.element {
  mask: linear-gradient(black, transparent);
}

结合 overflow 和 transform 隐藏溢出内容并调整显示区域：

.container {
  overflow: hidden;
  width: 200px;
  height: 200px;
}
.element {
  transform: translate(-20%, -10%);
}

SVG 剪切路径 定义 SVG 路径并应用于 HTML 元素：

<svg>
  <clipPath id="customClip">
    <path d="M10,10 L200,100 L150,200 Z"/>
  </clipPath>
</svg>
<style>
  .element {
    clip-path: url(#customClip);
  }
</style>

实际应用示例

图片裁剪为菱形

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

动态悬停效果

.card {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.3s;
}
.card:hover {
  clip-path: inset(10px 20px 30px 40px);
}

浏览器兼容性提示

• 现代浏览器均支持 clip-path（需前缀处理旧版）
• SVG 剪切路径兼容性最佳
• 可添加 -webkit- 前缀增强支持

以上方法可根据具体设计需求组合使用，实现从简单形状到复杂动态剪切效果。