首先我們先創建一個圖案為100像素的斜面切角的圖案

html

<div class="one">12345</div>

css

.one{
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background: yellowgreen;
    background: linear-gradient(-135deg,transparent 15px ,yellowgreen 0 );
  }

效果圖

然後我們在生成一個我們需要的折角三角形

css

.one{
    width
 
: 100px;
    height: 100px;
    margin: 0 auto;
    border: 1px solid red;
    background: linear-gradient( to left bottom ,transparent 50%,rgba(0,0,0,.4) 0 )no-repeat 100% 0 / 15px 15px ;
  }

效果圖

最後我們只需要合並一下就可以得出我們想要的折角效果

css

.one{
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background
 
: yellowgreen;
    background: linear-gradient( to left bottom ,transparent 50%,rgba(0,0,0,.4) 0 )no-repeat 100% 0 / 15px 15px,
    linear-gradient(-135deg,transparent 10.5px ,yellowgreen 0 );
  }

效果圖

css 折角效果/切角效果