CSS之剪切横幅

简述

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>

分析

我们先看下图

这里写图片描述

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