CSS切片这个词不是这么说的：第一，CSS是新式，也就是样式结构表，用来定义网页布局，进行网页美化的样式。
第二，切片，就是用PS画的图片，只是用切片工具进行切片，也可以直接复制那个图片进行保存，切片，直接说就是一道过程，要把图片进行切割而已，为什么会用么切片就是因为PS画的效果图是分层的，有时候在层次上需要几个图层一起下来，用切片就方便一点，不过我不喜欢切片，我喜欢把图保存一张高质量的JPG后再进行复制，这只是设计师的爱好而已。
因为一个PS效果图要做成一个网页，不切片的话上传上去就是一个图片的形式了，就不会出现文字，所以要进行切片排版，这样才可以输出文字，当然这得靠我们的程序员了。
切好片之后的排版，就要用到CSS样式来进行文字，或图片的控制，这就是CSS定义样式，起到美化的作用。
不应该叫css切图，应该叫网页切图。网页设计图稿做好以后，要把图稿输出为网页放到网上给人看，需要图片根据需要切成一小块一小块的，有的直接写在html代码中插入网页，有的写到css里面做背景，通过html、css及js等代码和这些切成小块的图片组合起来形成设计稿上的样子。
具体怎么切，有很多细节，书店买点书看看，这个非三言两语能说清楚的。
上一小节给大家分享了平行四边形的实现方法，此时我们来说一下切角效果的实现方法。实现切角效果需要掌握的几个点包括： css渐变、background-size、条纹背景
直角切角
先实现一个简单的，比如让一个矩形，右下角切掉。实现该功能可以使用强大的渐变功能，有了渐变基础，应该不难理解。
注：background: #58a不是必须的，加上它是为了将其作为回退机制。
实现两个切角，左右下角各一个。一层渐变肯定不行，需要两层。按想法一步步实现，首先可能会这样写，想学习更多案例效果的小伙伴可以加我Q群：142991222，一起探索更多前端干货。
可以看到，效果并没有实现，原因是两层渐变都会填满整个元素，因此它们会相互覆盖。需要让它们缩小一点，使用background-size让每层渐变分别只占据整个元素的一半。
依然没有达到效果，这是因为没有添加background-repeat属性，因而每层渐变图案各自平铺了两次。
好了，现在实现了。如果要四个角的话，就要四层渐变了。
就这样一个切角效果就实现了，后还会补充更多多边形效果，大家多多支持，多多鼓励！
