css实现如图内凹边角

最新推荐文章于 2023-03-09 11:24:39 发布

AzeShinja

最新推荐文章于 2023-03-09 11:24:39 发布

阅读量777

点赞数

分类专栏： CSS 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/AzeShinja/article/details/127422297

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在这里插入图片描述
我的实现思路是上下两个一个为：before 一个是 after，所以直接上代码了

@mixin edgeStyle {
  width: 15px;
  height: 15px;
  z-index: -1;
  content: '';
  position: absolute;
}
  (你的父级DIV CLASS)::after {
    @include edgeStyle();
    background-image: radial-gradient(15px at top left, transparent 15px, #ffffff 10px, #ffffff );
    top: -15px;
    right: 0px;
  }
  (你的父级DIV CLASS)::before {
    @include edgeStyle();
    background-image:
    radial-gradient(15px at bottom left, transparent 15px, #ffffff 10px, #ffffff );
    bottom: -15px;
    right: 0px;
  }