一、前言
clip-path ：CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。
目前我用过的是polygon属性
想要了解更多可以查看文档clip-path - CSS：层叠样式表 | MDN
二、使用
1. 绘制三角形
在之前让我画一个三角形，我用的是border边框来画一个三角形。 当我刚接触polygon的时候就第一时间想到的就是画一个三角形。
- 下面是使用border画一个三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.border{
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid #f00;
}
</style>
</head>
<body>
<!-- 使用border画一个三角形 -->
<div class="border">
</div>
</body>
</html>
- 使用polygon画一个三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.polygon{
width: 200px;
height: 200px;
background-color: #0f0;
clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
}
</style>
</head>
<body>
<!-- 使用polygon画一个三角形 -->
<div class="polygon">
</div>
</body>
</html>
2.polygon使用方法
clip-path: polygon();
通过指定其点的坐标，你可以使用 polygon() 函数创建几乎任何形状。定义点的顺序很重要，可能会导致不同的形状。polygon() 函数至少需要 3 个点，这将创建一个三角形，但没有上限。
polygon() 函数接受逗号分隔的坐标或点作为其值。每个点由一对以空格分隔的 x 和 y 值表示，这些值指示多边形内的点的坐标。
polygon(x1 y1, x2 y2, x3 y3, x4 y4, xn yn)
