1、45度的折角

當折角為45deg時，實現原理是利用兩層漸變背景，一層用來實現底層背景，一層用來實現折疊的三角，再把三角層覆蓋在底層上，就形成了一個三角形的折角。

background: linear-gradient(to left bottom,transparent 50%,#333 50%) no-repeat right top / 20px 20px,
            linear-gradient(-135deg, transparent 14px,#58a 0);
// 底層透明為14px，這個值是三角大小的二分之根號二倍，通過勾股定理計算得出，三角中的20px是漸變的長和寬，背景漸變中14px的是對角線的長度，即三角形的高。

2、任意角度的折角

實現任意角度的折角，需要用漸變來實現背景，用偽元素來生成折角的部分。實現30deg的折角：

.a{
    background: linear-gradient(-150deg,transparent 20px,#58a 0);  // 20px為折角直角三角形的高
}
.a:before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 23px;  // 由三角函數可得長度為  20/cos 30°  
    height: 40px; // 由三角函數可得高度為  20/sin 30° 
    background: linear-gradient( to left bottom, transparent 50%,#333 0) right top no-repeat;
}

再對偽元素進行旋轉，貼合漸變背景形成的折角邊。

transform: rotate(-30deg);
transform-origin: bottom right; // 讓旋轉點固定為右下角，使得偽元素的位置可控性更高，這樣偽元素右下角會貼合主元素邊緣，這樣偽元素就只要在高度這個方向上移動就可以貼合背景。

偽元素在高度上的位移可以通過之前一圖計算出，要讓偽元素的右下角貼合漸變背景的折角右頂點，上移的高度就等于偽元素的高減去寬。

transform: translateY(-17px) rotate(-30deg); // 先位移，再旋轉，保證偽元素右下角的位置固定在右邊緣
transform-origin: bottom right;

加上一定的修飾樣式，讓折角更加逼真。

.a{
    border-radius: 10px;
}
.a:before{
    border-bottom-left-radius: inherit; // 折角的圓角為左下角。
    box-shadow: -5px 5px 8px -3px rgba(0,0,0,.2);
}