<style>
clip-path: polygon(X1 Y1,X2 Y2,....)
</style>
当我们写页面时对盒子的形状有需求时,除了使用border-radius来给盒子设置圆角还可以使用这个属性来自定义盒子形状
里面的参数表示每一个点的坐标,x1 y1为起始点
单位可以是百分比或者px,
最后一个定义的点会自动连接第一个点形成封闭图形
有了这个属性,除了定义盒子形状我们还可以来实现一些有趣的动画效果
例如:
注意:动画中两组polygon中的参数的数量一定是要相等的,否则没有动画的过渡效果
<style>
div {
width: 300px;
height: 300px;
background: conic-gradient(lightpink, blue, powderblue);
clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
animation: 4s poly infinite alternate ease-in-out;
margin: 10px auto;
}
@keyframes poly {
0% {
clip-path: polygon(50% 0%, 60% 40%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
}
100% {
clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%,0% 100%);
}
}
</style>
<body>
<div></div>
</body>
