CSS3技巧之形状(切角效果)

html-css018

CSS3技巧之形状(切角效果),第1张

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

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

直角切角

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

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

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

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

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

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

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

这是哪个奇葩的面试官,太简单了吧,边框可以有5种形状(以CSS3为标准)

正常情况下,边框为长方形正方形,例如border:1px solid #eee

但是CSS3引入了新的属性border-radius后,可以将边框定义为圆角边框或者圆形边框以及不规则圆形边框.

具体形状要看长宽与border-radius所赋的值