简述
clip-path属性指定一个应用到元素上的剪切路径。应用在SVG中<clipPath>元素上的属性值可以完全运用在clip-path属性上。还可以使用CSS Shapes模块中的基本形状来定义剪切路径。这些形状可以使用形状函数来创建。这些形状态函数包括polygon()、circle()、inset()(用来定义嵌入的矩形)和ellipse()。
使用clip-path属性将一个剪切路径运用在一个元素上非常的简单，下面我们来看一个剪切实现。
剪切
效果
通过clip-path我们可以设置一个剪切路径，polygon表示多边形。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>剪切横幅</title>
<style type='text/css'>
div {
width: 250px;
padding: 9px 0 9px 5%;
color: #fff;
background-color: #d32f36;
-webkit-clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
}
</style>
</head>
<body>
<div>剪切横幅</div>
</body>
</html>
AI 代码解读
分析
我们先看下图
坐标横坐标和纵坐标起点均是从0开始，最大值为100%。
图中标识出的顺序依次对应polygon的坐标，polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%)。
即：
1 - 坐标点：0 0
2 - 坐标点：100% 0
3 - 坐标点：95% 50%
4 - 坐标点：100% 100%
5 - 坐标点：0 100%
6 - 坐标点：5% 50%
