19、折角效果

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);
}