CSS3實現缺角矩形，缺角邊框以及折角矩形

1.缺角矩形

1.創建div

<div class="box"></div>
<style>
    .box{
        width: 100px;
        height: 60px;
        background: #2baaca;
    }
</style>

2.變為缺角矩形

• /* 左上 */
  .box{
      background: linear-gradient(135deg, transparent 10px, #2baaca 0);
  }
  

• /* 右上 */
  .box{
      background: linear-gradient(-135deg, transparent 10px, #2baaca 0);
  }
  

• /* 右下 */
  .box{
      background: linear-gradient(-45deg, transparent 10px, #2baaca 0);
  }
  

• /* 左下 */
  .box{
      background: linear-gradient(45deg, transparent 10px, #2baaca 0);
  }
  

• /* 四個角 */
  .box{
      background: linear-gradient(135deg, transparent 10px, #2baaca 0) top left,
                  linear-gradient(-135deg, transparent 10px, #2baaca 0) top right,
                  linear-gradient(-45deg, transparent 10px, #2baaca 0) bottom right,
                  linear-gradient(45deg, transparent 10px, #2baaca 0) bottom left;
      background-size: 50% 50%;
      background-repeat: no-repeat;
  }
  

• /* 兩個角 */
  .box{
      background: linear-gradient(135deg, transparent 10px, #2baaca 0) top left,
                  linear-gradient(-135deg, transparent 10px, #2baaca 0) top right,
                  linear-gradient(-45deg, transparent 0, #2baaca 0) bottom right,
                  linear-gradient(45deg, transparent 0, #2baaca 0) bottom left;
      background-size: 50% 50%;
      background-repeat: no-repeat;
  }
  

• /* 弧形缺角 */
  .box{
      background: radial-gradient(circle at top left, transparent 10px, #2baaca 0) top left,
                  radial-gradient(circle at top right, transparent 10px, #2baaca 0) top right,
                  radial-gradient(circle at bottom right, transparent 10px, #2baaca 0) bottom right,
                  radial-gradient(circle at bottom left, transparent 10px, #2baaca 0) bottom left;
      background-size: 50% 50%;
      background-repeat: no-repeat;
  }
  

2.缺角邊框

使用兩個缺角矩形疊加。

1.創建div

<div class="box">
    <div class="box_inner"></div>
</div>

2.變為缺角邊框

.box{
    width: 100px;
    height: 60px;
    padding: 4px; //邊框的寬度
	background: linear-gradient(135deg, transparent 10px, #2baaca 0);
}
.box_inner{
	width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent 9px, #fff 0);
}

3.折角矩形

在缺角矩形的基礎上多了一個折角。

1.創建div

<div class="box"></div>
<style>
    .box{
        width: 120px;
        height: 80px;
        background: #2baaca;
    }
</style>

2.變為折角矩形

• /* 45度折角 */
  .box{
      /* 一定要先畫小三角，再畫缺角矩形，否則矩形會蓋住小三角 */
      background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.4) 0) no-repeat 100% 0 / 1.4rem 1.4rem,
                  linear-gradient(-135deg, transparent 1rem, #2baaca 0);
  }
  

• /* 30度折角 */
  .box{
      background: linear-gradient(-150deg, transparent 1rem, #2baaca 0);
      border-radius: .3em;
      position: relative;
  }
  .box::before{
      content: '';
      position: absolute;
      right: 0;
      top: -0.85rem;
      width: 1.15em;
      height: 2em;
      background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.4)) 100% 0 no-repeat;
      transform: rotate(-30deg);
      transform-origin: bottom right; /* 讓三角形的右下角成為旋轉的中心 */
      box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
      border-bottom-left-radius: inherit; /* 左下角繼承border-radius */
  }
  

[參考地址]((24條消息) CSS3實現缺角矩形，缺角邊框以及折角矩形_HuangsTing的博客-CSDN博客_css 缺角邊框)

1.缺角矩形