简述

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

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

剪切

效果

通过clip-path我们可以设置一个剪切路径，polygon表示多边形。

       
     
      剪切横幅
     

分析

我们先看下图

坐标横坐标和纵坐标起点均是从0开始，最大值为100%。

图中标识出的顺序依次对应polygon的坐标，polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%)。

即：

1 - 坐标点：0 0