HTML中的CSS的Clip,CSS的clip-path

在Web网页中主要是以矩形分布的。而平面媒体则倾向于更多不同的形状。造成这种差异的原因是因为缺少合适的工具去实现我们平面媒体中的内容。这也就造成了很多设计师的创意发挥，就算是有创意，前端实现也将付出巨大的开发成本。

虽然CSS Shapes Module Level 1(CSS形状模块标准1)的规范出现，可以打破矩形设计的限制。但仍需要一些不规则的图形。而早前实现一些不规则的图形，都需借助其它的元素功能，比如CSS绘制图形，很多时候就依赖于伪元素，或多个元素。如此一来，CSS Shapes依旧无法发挥其强大的功能，让我们的Web打破常规的矩形布局。不过值得庆幸的是，CSS的clip-path出现，它可以帮助我们绘制很多特殊的图形(不规则的图形)，比如：

那么这篇文章，我们就一起来了解这个属性。

基本概念

clip-path从单词"clip path"的直译上来说，表示的就是裁剪路径。既然有裁剪，咱们就来了解这里面的几个简单的概念。

裁剪就是从某样东西剪切一块。比如说，我们在元素上，根据需要，剪切一部分需要留下的区域。而在整个裁剪中，将会碰到两个相关的概念：裁剪路径(Clipping Path)和裁剪区域(Clipping Region)。

裁剪路径是我们用来裁剪元素的路径，它标记了我们需要裁剪的区域。它可以是个简单的形状(比如Web中常见的矩形)，也可以是一个复杂的多边形(不规则的多边形)。

裁剪区域是裁剪路径闭合后所包含的全部区域。

这样一来，元素分为两部分，裁剪区域和裁剪区域外。浏览器会裁剪掉裁剪区域以外的区域，不仅是背景及其它类似的内容，也包括 border、text-shadow 等。更赞的是，浏览器不会捕获元素裁剪区域以外的 hover、click 等事件。

即使如今一些特定元素不受长方形限制，但实际上元素周围的内容还是会认为元素是原始形状(长方形)的，并按此进行文档流的布局。要想使周围元素根据元素裁剪后的形状进行布局，可以使用 shape-outside属性。有关于shape-outside相关详细的介绍，可以阅读有关于CSS Shapes相关的教程，这里不做过多阐述。

旧的clip

CSS Masking Module Level 1中也提供了一个clip属性。可以说clip是CSS中出现的第一种裁剪技术。其实了解过clip的同学都知道，它就是通过overflow:hidden将裁剪区域外的元素隐藏掉了。可以说它不是真正的裁剪。

clip属性到目前为止，仅支持rect()函数，就是裁剪出一个矩形(其它形状还无法实现)。

clip: rect(, , , );

在CSS2.1中，rect()和和指定偏移量是从元素盒子顶部边缘算起；和指定的偏移量是从元素盒子左边边缘算起。

更为无奈的是，clip属性只能在元素设