简述

clip-path属性指定一个应用到元素上的剪切路径。应用在SVG中<clipPath>元素上的属性值可以完全运用在clip-path属性上。还可以使用CSS Shapes模块中的基本形状来定义剪切路径。这些形状可以使用形状函数来创建。这些形状态函数包括polygon()、circle()、inset()(用来定义嵌入的矩形)和ellipse()。

使用clip-path属性将一个剪切路径运用在一个元素上非常的简单，下面我们来看一个剪切实现。

简述
剪切
- 效果
- 分析

剪切

效果

CSS之剪切横幅-LMLPHP

通过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>

分析

我们先看下图

CSS之剪切横幅-LMLPHP

坐标横坐标和纵坐标起点均是从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%