css边框斜角

标签：斜角 linear gradient 100% 边框 20px calc 15px css

为实现下面图形形状

<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

.chamfer{
      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);
  }

 

标签：斜角,linear,gradient,100%,边框,20px,calc,15px,css
From： https://www.cnblogs.com/yunjiao/p/17480920.html