css 实现div 4个角尖角边框样式

最新推荐文章于 2024-09-06 09:15:00 发布

LeaT07

最新推荐文章于 2024-09-06 09:15:00 发布

阅读量1.3k

点赞数

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/leatitia/article/details/120989609

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

经常使用的一个小技巧，在不添加额外元素的情况下，使用background绘制div的4个角border

.is-active:before{
          content: '';
          position: absolute;
          top: 2px;
          left: 2px;
          width: 100%;
          height: 100%;
          background: linear-gradient(to left, #f00, #f00) left top no-repeat,
          linear-gradient(to bottom, #f00, #f00) left top no-repeat,
          linear-gradient(to left, #f00, #f00) right top no-repeat,
          linear-gradient(to bottom, #f00, #f00) right top no-repeat,
          linear-gradient(to left, #f00, #f00) left bottom no-repeat,
          linear-gradient(to bottom, #f00, #f00) left bottom no-repeat,
          linear-gradient(to left, #f00, #f00) right bottom no-repeat,
          linear-gradient(to left, #f00, #f00) right bottom no-repeat;
          background-size: 1px 5px, 5px 1px, 1px 5px, 5px 1px;
        }