clip-path的简单使用
发表于:2023-04-24 |

前言

不知道大家是否遇到过需要画三角形等多边形的情况,在以前,大概率时候使用的是这样的语法。

1
2
3
4
5
6
7
.triangle{
width:0;
height:0;
border-left:25px solid transparent;
border-right:25px solid transparent;
border-top:60px solid #000;
}

但是现在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 常用于实现一些炫酷的动画效果。

上一篇:
【可视化学习】01-Three.js的本地部署
下一篇:
【每日一练】01-CSS实现3D菜单效果