缺角边框

<div class="out-rect">
<div class="in-rect"></div>
</div>

.out-rect {
margin-top: 30px;
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 80px;
padding: 5px;
background: linear-gradient(-45deg, transparent 9px, #58a 0) top right;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.in-rect{
width: 100%;
height: 100%;
background: linear-gradient(-45deg, transparent 8px, #fff 0) top right;
background-size: 100% 100%;
background-repeat: no-repeat;
}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 语法 最基本,使用 mask 的方式是借助图片,类似这样: { /* Image values */ ma...
    长布阅读 4,149评论 0 0
  • background-color background-color:#ff0000红色background-col...
    每日活菌阅读 3,434评论 0 0
  • 1.使用渐变 因为渐变可以接受一个角度,比如45deg作为方向,而且色标的位置信息也可以是绝对的长度值,不受容器尺...
    0清婉0阅读 5,098评论 0 1
  • 一、Background的基本属性 background-color: background-image:url(...
    WHealer阅读 9,081评论 0 1
  • 今天感恩节哎,感谢一直在我身边的亲朋好友。感恩相遇!感恩不离不弃。 中午开了第一次的党会,身份的转变要...
    迷月闪星情阅读 13,585评论 0 11