css剪裁clip-path——基本图形剪裁

语法：https://developer.mozilla.org/zh-CN/docs/Web/CSS/basic-shape/inset

`clip-path`属性，包括`inset()`用于矩形剪裁，支持百分比和圆角；`circle()`和`ellipse()`用于创建圆形和椭圆剪裁，支持半径百分比；以及`polygon()`用于自定义多边形剪裁，支持不规则形状。通过这些方法，可以实现更复杂的元素剪裁效果，创建独特的视觉设计。

矩形 inset()   参考：https://www.cnblogs.com/zhwl/p/4618808.html

• rect()函数的4个值只对应2个方位，分别是元素的上、左、上、左。  效果 demo
• inset()函数的4个值对应4个方位，分别是元素的上、右、下、左。

• 支持百分比值
• 支持圆角

/* 上下左右偏移大小15%，四个角的圆角大小10% 50% 10% 50%*/
clip-path: inset(15% round 10% 50% 10% 50%);

 相比border-radius创建的圆角，使用inset()函数剪裁的圆角要更加灵活，可以准确指定哪片区域有圆角效果。

clip-path: inset(15% 0% 15% 30% round 10% 50% 10% 50%);
/*

15% 0% 15% 30% 分别对应的 上 下 左 右 偏移量 

round 10% 50% 10% 50% 分别对应的 四个 角的 圆幅度

*/

 

clip-path: inset(15% 0% 15% 30% round 50% 50% 0% 0% / 100% 100% 0% 0%);

/*

15% 0% 15% 30% 分别对应的 上 下 左 右 偏移量 

round 50% 50% 0% 0% 分别对应的 四个 角的 X 轴 圆幅度

/ 100% 100% 0% 0% 分别对应的 四个 角的 Y 轴 圆幅度

*/

圆 circle()  函数使用一个半径和一个位置定义一个圆形。  

circle( <shape-radius>? [ at <position> ]? )

 

clip-path: circle();

• 指定圆心的位置

clip-path: circle(180px at right bottom);

/***
180px 圆的半径

at right bottom  圆心所在的位置

****/

• 半径值支持百分比值

clip-path: circle(40% at right 10% bottom 10%);
/**

40% 圆的半径

at right 10% bottom 10% 圆心所在的位置

*/

椭圆 ellipse()函数使用两个半径和一个位置定义一个椭圆形。

 

ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )

 

clip-path: ellipse();

• 半径（半轴）值同样支持百分比值

clip-path: ellipse(30% 50% at 75% 50%);
/**

30% 50% 椭圆的 X轴 Y轴的半径

at 75% 50%  椭圆 圆心所在的坐标位置

**/

 

多边形 polygon()

效果见 https://demo.cssworld.cn/new/12/2-4.php

<ui-tips>感谢大家</ui-tips>
<ui-tips>感谢大家购买这本《CSS新世界》</ui-tips>
<ui-tips>感谢大家购买这本《CSS新世界》，如果你觉得这本书还不错，欢迎推荐给身边的朋友</ui-tips>

ui-tips {
    display: inline-block;
    max-width: 250px;
    padding: 10px 15px 26px;
    color: #fff;
    background: linear-gradient(45deg, deepskyblue, deeppink);
    border-radius: 6px 6px 0 0;
    --clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 2px) calc(100% - 18px), calc(100% - 6px) calc(100% - 16px), calc(15% + 18px) calc(100% - 16px), calc(15% + 9px) calc(100% - 6px), 15% calc(100% - 16px), 0 calc(100% - 16px), 6px calc(100% - 16px), 2px calc(100% - 18px), 0 calc(100% - 22px));
    -webkit-clip-path: var(--clip-path);
    clip-path: var(--clip-path);
}

• 重复的连线的剪裁效果是透明的，可用于实现不规则的复合多边形效果

.double-triangle {
    clip-path: polygon(5px 10px, 16px 3px, 16px 10px, 26px 10px, 26px 3px, 37px 10px, 
26px 17px, 26px 10px, 16px 10px, 16px 17px)
}

 路径可以使用下方的工具自动生成：

CSS3剪贴路径（Clip-path）在线生成器工具

http://tools.jb51.net/code/css3path

 选择自定义，可以绘制任意多边形（将鼠标移动到第1个点上，会出现对号按钮，点击后即表示已添加完所有点，拖拽各点调整成最终形状即可。）

 

任意图形 path()

 点击后动态变化

 （使用Chorme浏览器）效果见 https://demo.cssworld.cn/new/12/2-5.php

<button class="icon-arrow"></button>

.icon-arrow {
    width: 32px; height: 32px;
    background: linear-gradient(45deg, deepskyblue, deeppink);
    clip-path: path("M16.016 1.157l-15.015 15.015h9.009v16.016h12.012v-16.016h9.009z");
    transition: .2s;
}
.icon-arrow:active {
    clip-path: path("M16.016 31.187l15.015-15.015h-9.009v-16.016h-12.012v16.016h-9.009z");
}

 

来源：https://blog.csdn.net/weixin_41192489/article/details/121341551