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

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

引用

CSDN

1.

https://blog.csdn.net/weixin_41192489/article/details/121341551

CSS的clip-path属性可以用来剪裁元素的可见区域，创建各种有趣的形状效果。本文将详细介绍clip-path的基本用法，包括矩形、圆形、椭圆和多边形等基本图形的剪裁效果。

矩形 inset()

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%);

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

圆 circle()

clip-path: circle();

• 指定圆心的位置

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

• 半径值支持百分比值

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

椭圆 ellipse()

clip-path: ellipse();

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

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

多边形 polygon()

效果见：CSS多边形剪裁示例

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浏览器）
效果见：CSS路径剪裁示例

.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");
}