CSS3技巧之形状（切角效果）

上一小节给大家分享了平行四边形的实现方法，此时我们来说一下切角效果的实现方法。

实现切角效果需要掌握的几个点包括： css渐变、background-size、条纹背景

直角切角

先实现一个简单的，比如让一个矩形，右下角切掉。实现该功能可以使用强大的渐变功能，有了渐变基础，应该不难理解。

注：background: #58a不是必须的，加上它是为了将其作为回退机制。

实现两个切角，左右下角各一个。一层渐变肯定不行，需要两层。按想法一步步实现，首先可能会这样写，想学习更多案例效果的小伙伴可以加我Q群：142991222，一起探索更多前端干货。

可以看到，效果并没有实现，原因是两层渐变都会填满整个元素，因此它们会相互覆盖。需要让它们缩小一点，使用background-size让每层渐变分别只占据整个元素的一半。

依然没有达到效果，这是因为没有添加background-repeat属性，因而每层渐变图案各自平铺了两次。

好了，现在实现了。如果要四个角的话，就要四层渐变了。

就这样一个切角效果就实现了，后还会补充更多多边形效果，大家多多支持，多多鼓励！

不固定，可以自己设置指定键为切角快捷键。

具体步骤如下，首先打开3dmax，然后点击菜单栏上的自定义→自定义用户界面。在“键盘”下的选项组中找到“editablepolygonobject”。然后拖动滚动条找到“切角边（多边形）”，点击它。接着在右侧的“热键”中输入按键，再单击“指定”就成功设置好切角边快捷键了，用这种方法还可以设置其他的快捷键。

1、切角是指在图形的边缘处，使用直线和曲线的组合来形成一个角的形状，而贝内特是指在图形的边缘处，使用圆弧来形成一个角的形状。

2、切角可以使图形的边缘更加平滑，而贝内特可以使图形的边缘更加圆润。

3、切角的角度可以自由调节，而贝内特的角度受到圆弧的半径的限制。

---