在css中如何使用clip-path裁剪元素

clip-path是CSS3引入的属性，作用是裁剪元素的可见区域，只显示指定区域内的内容，区域外的内容会被隐藏，常用于实现特殊形状的元素、图片裁剪、动态过渡效果等场景。

clip-path基本语法

clip-path的语法格式为：

/* 基础语法 */
clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none;

/* 示例：裁剪为圆形 */
.element {
    clip-path: circle(50% at 50% 50%);
}

其中<basic-shape>是常用的裁剪形状值，<geometry-box>用于指定裁剪的参考盒模型，默认是border-box。

常用裁剪形状函数

1. circle() 圆形裁剪

circle()函数用于裁剪出圆形区域，参数依次是半径和圆心位置，圆心位置默认是元素中心。

/* 裁剪为半径50px的圆形，圆心在元素左上角 */
.circle-demo {
    width: 200px;
    height: 200px;
    background: #409eff;
    clip-path: circle(50px at 0 0);
}

/* 裁剪为占元素一半大小的圆形，居中显示 */
.circle-center {
    width: 200px;
    height: 200px;
    background: #67c23a;
    clip-path: circle(50% at 50% 50%);
}

2. ellipse() 椭圆裁剪

ellipse()函数用于裁剪出椭圆区域，前两个参数是椭圆的x轴半径和y轴半径，后面是圆心位置。

/* 裁剪为x轴半径80px，y轴半径40px的椭圆，居中 */
.ellipse-demo {
    width: 200px;
    height: 200px;
    background: #e6a23c;
    clip-path: ellipse(80px 40px at 50% 50%);
}

3. polygon() 多边形裁剪

polygon()是最灵活的函数，通过指定多个坐标点来定义多边形裁剪区域，坐标点用逗号分隔，每个点是x y的格式。

/* 裁剪为三角形 */
.triangle {
    width: 200px;
    height: 200px;
    background: #f56c6c;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

/* 裁剪为五边形 */
.pentagon {
    width: 200px;
    height: 200px;
    background: #909399;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

4. inset() 矩形内裁

inset()函数用于从元素边缘向内裁剪，参数依次是上、右、下、左的内裁距离，还可以指定圆角。

/* 上下内裁20px，左右内裁30px */
.inset-demo {
    width: 200px;
    height: 200px;
    background: #409eff;
    clip-path: inset(20px 30px 20px 30px);
}

/* 内裁同时设置10px圆角 */
.inset-radius {
    width: 200px;
    height: 200px;
    background: #67c23a;
    clip-path: inset(20px round 10px);
}

动态裁剪效果实现

clip-path支持CSS过渡和动画，可以实现动态的裁剪效果。

/* 鼠标悬停时从圆形变为全显示 */
.dynamic-demo {
    width: 200px;
    height: 200px;
    background: #e6a23c;
    clip-path: circle(30% at 50% 50%);
    transition: clip-path 0.3s ease;
}

.dynamic-demo:hover {
    clip-path: circle(70% at 50% 50%);
}

注意事项

• clip-path裁剪的区域不会响应鼠标事件，只有可见区域可以触发交互
• 部分旧版本浏览器需要添加前缀，比如-webkit-clip-path
• 使用polygon()定义复杂多边形时，坐标点需要按顺序闭合，否则裁剪效果可能不符合预期
• 如果裁剪后元素内容溢出，需要配合overflow: hidden使用吗？不需要，clip-path本身就会隐藏裁剪区域外的内容

兼容性说明

目前主流现代浏览器都支持clip-path属性，具体兼容情况可以参考以下表格：

clip-pathCSS元素裁剪polygon修改时间：2026-07-16 18:15:33