CSS的 clip-path 属性可以使用裁剪的方式创建元素的 可显示区域。区域内的部分显示,区域外的隐藏。
本文主要讲的是clip-path的取值,也就是一种表现基础图形的 CSS 数据类型。该数据类型的常见取值有:circle()、ellipse()、polygon()、path()、rect()、xywh()。
首先写一段基础代码,定义一个矩形盒子:
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 300px;
height: 300px;
margin: 50px auto;
background-color: burlywood;
}
</style>
<div class="box"></div>
1.circle()
该取值定义一个圆形。函数内可写px大小或者百分比,但不能超过举行盒子的宽度的一半,否则圆形区域会超过矩形,超过部分被隐藏。
如:
.box{
clip-path: circle(50px); /* 圆形半径为50px */
}
.box{
clip-path: circle(50%); /* 圆形半径为300x50%=150px */
}
2.ellipse()
该取值定义一个椭圆,函数内填写x,y方向的长度取值,以及图形的圆心在x,y方向的偏移量。
如:
.box{
clip-path: ellipse(130px 140px at 10% 20%);
}
基于此,我们也可以设置出圆形,也就是xy方向的长度为矩形的一半150px,圆心相对于矩形偏移50%。
3.polygon()
该取值定义一个多边形,可使用n组顶点填充。
如:定义一个三角形。则使用三组顶点,每组顶点确定一个xy方向的偏移量。每组顶点的xy的偏移量相对于矩形的左上角顶点进行确定。
.box{
/* 第一个顶点 */
clip-path: polygon(150px 0, 0 300px, 300px 300px);
/* 或者使用百分比 */
clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
4.path()
定义一个任意形状(使用一个可选的 SVG 填充规则和一个 SVG 路径定义)。
如:
.box{
clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z');
}
5.rect()
乌漆嘛黑,略。
6.xywh()
.box{
/* x方向偏移0px, y方向偏移5px, 宽度100%, 高度75%, 形状为round, 左上角弧度15%, 右上角弧度0, 右下角弧度15%, 左下角弧度0 */
clip-path: xywh(0 5px 100% 75% round 15% 0 15% 0);
}