斜角裁切
裁切角在尖角與斜角之間往複,科技感邊框。
效果預覽
參數調節
完整代碼
/* 斜角裁切 */
@keyframes clipCorners {
0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
50% { clip-path: polygon(12% 0, 100% 0, 100% 88%, 88% 100%, 0 100%, 0 12%); }
}
.clip-corners { animation: clipCorners 2.8s ease-in-out infinite; }