CSS画图形在Web运用中时常看到，比如三角形、五角星，心形，Ribbon等。不过以前使用CSS绘制图形一般都是借助于border来绘制，但这样的方式受到一定的限制，而且实用价值也有所限制。这篇文章将介绍使用CSS的clip-path来完成正多边形的绘制，并且借助CSS预处理器Sass给这两种方法定义对应的混合宏和函数，实现正多边形的开发。

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

CSS的clip-path属性是你改变传统单调的盒子布局，走向响应式设计的通行证。你将开始摆脱条条框框，自由地在您的网页上使用六边形、星形和八边形等等进行设计。一旦你真正开始使用clip-path，你可以生成的形状是无限多的，只需要简单地调整几个值即可。虽然这篇文章的重点是使用CSSclip-path完成多边形裁剪，但是所有的demo都提供了内联SVG的参考，这是为了能额外获得Firefox的支持。只要你使用过CSSclip-path创建响应图形，生成响应式的SVG裁剪图形是很容易的。我们后面再详细说说。

在教学过程中的一个很重要的部分是，学生们通常都有很多非常新鲜的想法。而我们则倾向于思考要如何完成一项任务，也因此错过了很多可用的而且很酷的新技术。看看我们训练营第一个星期的项目，是一个简单的单页网站，用于演示对HTML和CSS的理解：使用语义化的标记语言和CSS来实现样式。我们的其中一个学生，Heather Banks，她曾经作为我的学生part-time参与过HTML/CSS课程，想要复制一个在Squarespace上看到的效果，周围的div元素似乎有被剪裁。

你也许能够熟练的使用PS对文本进行图像掩埋；一个比较好的方法是在文字上添加一些纹理或者是一个背景图片。然后把这个文本存储为图像，你就可以在你的网站上使用；但是如果可以只使用HTML和CSS来产生相同的效果不是更好吗？好消息是，确实可以！CSS介绍了background-clip 和 mask-image的属性，或许你可以使用他们来创造相似的效果，就像你用PS创造出来的那样。最重要的是，你也可以使用SVG来进行文本图像剪辑。

species-in-pieces网站的效果让前端人员眼前一亮，我在微博上发了这样的效果，聚集了不少同学的讨论。在大知乎上也有很多同学关注这个话题。@拴萝卜的棍子在前端乱炖上发表了一篇文章，剖析了相关的技术。值得大家一读，特将此文转载到小站。

剪裁和遮罩都是用来隐藏元素的一些部分、显示其他部分的。当然了，这两者还是有区别的。区别主要在于这几方面：他们能做的东西，不同的语法，涉及到的不同技术，是新的还是旧的，以及浏览器支持的差异。但不幸的是总是有相当多的过时信息在那儿，所以一起来看看能否解决这个问题。

CSS和SVG有很多共同之处。CSS有很多特性都是从SVG中引入过来的。其中就有“剪切”的特性。CSS和SVG都允许我们对一个元素进行非矩形的剪切。在这篇文章中，将介绍CSS和SVG中的剪切技术。