clip-pathCSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。
polygon()定义一个多边形（使用一个 SVG 填充规则和一组顶点）。
关于polygon()参数坐标系
举个栗子，clip-path: polygon(0 0, 50% 20%, 100% 0, 100% 100%, 0 100%);，括号中的每对参数分别代表在坐标系中x轴和y轴的坐标，将这个栗子中的每个点画在坐标系中，就像下面这样
共五个点，分别为：
- 0 0
- 50% 20%
- 100% 0
- 100% 100%
- 0 100%
将坐标系中每个点连接起来，形成一个闭合图形，如下图所示：
CSS实战
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.demo{
width: 100px;
height: 100px;
background-color: aquamarine;
clip-path: polygon(0 0, 50% 20%, 100% 0, 100% 100%, 0 100%);
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>代码运行结果：