css 实现切角效果

最新推荐文章于 2024-09-05 15:57:47 发布

原创最新推荐文章于 2024-09-05 15:57:47 发布 · 452 阅读

1 ·

CC 4.0 BY-SA版权

前端效果专栏收录该内容

2 篇文章

订阅专栏

在这里插入图片描述
在页面展示效果，时常用到切角展示
这里效果的展示可以用切图的方式来实现；也可以用下面的css来实现

.qj{
  width:100px;
  height:100px;
  background:linear-gradient(135deg, transparent 10px,rgba(7,9,103,0.8) 0) top left,
  linear-gradient(-135deg, transparent 10px,rgba(7,9,103,0.8) 0) top right,
  linear-gradient(-45deg, transparent 10px,rgba(7,9,103,0.8) 0) bottom right,
  linear-gradient(45deg, transparent 10px,rgba(7,9,103,0.8) 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}