浅谈CSS属性：clip-path

目录


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

在这里插入图片描述