前言
不知道大家是否遇到过需要画三角形等多边形的情况,在以前,大概率时候使用的是这样的语法。
1 | .triangle{ |
但是现在css3中提供了clip-path属性,可以很方便的实现这种需求
1 | clip-path: polygon(50% 0%, 0% 100%, 100% 100%); |
而且CSS 的 clip-path 属性是 clip 属性的升级版,它们的作用都是对元素进行 “剪裁”,不同的是 clip 只能作用于 position 为 absolute 和 fixed 的元素且剪裁区域只能是正方形,而 clip-path 更加强大,可以以任意形状去裁剪元素,且对元素的定位方式没有要求。基于这样的特性,clip-path 常用于实现一些炫酷的动画效果。