纯色背景切角

  • 可以用线性渐变linear-gradient切
width: 200px;
  height: 150px;
  background: linear-gradient(135deg, transparent 15px, aqua 0) top left,
    linear-gradient(225deg, transparent 15px, aqua 0) top right,
    linear-gradient(45deg, transparent 15px, aqua 0) bottom left,
    linear-gradient(-45deg, transparent 15px, aqua 0) bottom right;
  background-size: 50% 50%;
  background-repeat: no-repeat;

自定义图片切角

  • 需要用clip-path属性
多边形(polygon):
// 下面是多边形
 clip-path: polygon(
    0 20%,
    20% 0,
    80% 0,
    100% 20%,
    100% 80%,
    80% 100%,
    20% 100%,
    0 80%
  );
// 如果要加延迟回复效果,clip-path也必须对应相应的多边形,如

  clip-path: polygon(
    0 0,
    0 0,
    100% 0,
    100% 0,
    100% 100%,
    100% 100%,
    0 100%,
    0 100%
  );
然后加css :transition: 0.3s clip-path; /* 裁剪的动画 */


爬。