css边框斜角

hl_Abel

已于 2024-04-03 13:32:47 修改

阅读量1.1k

点赞数 1

文章标签： css css3 前端

于 2024-04-03 13:32:26 首次发布

本文链接：https://blog.csdn.net/hl_Abel/article/details/137342364

版权

本文介绍了如何使用CSS的linear-gradient和clip-path属性来创建边框斜角效果，分别通过渐变和多边形剪裁技术，展示在实际代码中的应用实例。

摘要由CSDN通过智能技术生成

css边框斜角

1、利用linear-gradient
2、利用clip-path

<style>
.box{width:200px;height:100px;}
</style>
<div class="box" ></div>

1、利用linear-gradient

.box{

　　　 background: linear-gradient(135deg, transparent 15px, #3b3 0) top left,
      linear-gradient(-135deg, transparent 15px, #3b3 0) top right,
      linear-gradient(-45deg, transparent 15px, #3b3 0) bottom right,
      linear-gradient(45deg, transparent 15px, #3b3 0) bottom left;  
      background-size: 50% 50%;
      background-repeat: no-repeat;

}

2、利用clip-path

.box{
      width: 200px;
      height: 100px;
  
      background: #009EEB; 
      clip-path: polygon( 20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
  }