css之切角效果

一个切角

 <div class="main">
     <div class="box">切角效果</div>
 </div>
 <style>
     .box{
         width: 200px;
         height: 120px;
         padding: 10px;
         color: white;
         background: #58a;
         background: linear-gradient(-45deg, transparent 15px, #58a 0);
         
     }
 </style>

两个切角

 <div class="main">
     <div class="box">两个切角效果</div>
 </div>
 <style>
     .box {
         width: 200px;
         height: 120px;
         padding: 10px;
         color: white;
         background: #58a;
         background: linear-gradient(-45deg, transparent 15px, #58a 0) right,
             linear-gradient(45deg, transparent 15px, #58a 0) left;
         background-size: 50% 100%;
         background-repeat: no-repeat;
     }
 </style>

四个切角

 <div class="main">
     <div class="box">四个切角效果</div>
 </div>
 <style>
     .box {
         width: 200px;
         height: 120px;
         padding: 10px;
         color: white;
         background: #58a;
         background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
             linear-gradient(-135deg, transparent 15px, #58a 0) top right,
             linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
             linear-gradient(45deg, transparent 15px, #58a 0) bottom left;
         background-size: 50% 50%;
         background-repeat: no-repeat;
     }
 </style>

弧形切角

 <div class="main">
     <div class="box">弧形切角</div>
 </div>
 <style>
     .box {
         width: 200px;
         height: 120px;
         padding: 10px;
         color: white;
         background: #58a;
         background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
             radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
             radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
             radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
         background-size: 50% 50%;
         background-repeat: no-repeat;
     }
 </style>