css常见效果——信封效果

需求，我们需要实现如图所示的信封效果

相信大部分人都会再网上找，在这里我们来剖析其原理。

45°折角的解决方案

折角我想大多数人都会想到用伪元素或者一个真实的dom，但是那样开销大。这里我是用渐变来实现折角效果。

 div {
            width: 12em;
            background: #58a; /* Fallback */
            background:
            linear-gradient(-135deg, transparent 2em, #58a 0);
            background-size: 2em 2em, auto;
            padding: 2em;
            color: white;
            font: 100%/1.6 Baskerville, Palatino, serif;
        }

效果图如下

和大多数简便一样，我们这里使用了重复的渐变，所以会有如上的情况，不过这不重要

线性渐变生成切角

折角效果这里我也是用线性渐变。

linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .4) 0) 100% 0/ 2em 2em no-repeat;

效果图如下：

这个时候有人就会说，将这两个拼起来不就完事儿吗?
那么我们拼起来看看什么效果：

是不是很神奇？拼起来差了很多。

为什么呢？

原因在于第二层渐变linear-gradient(-135deg, transparent 2em, #58a 0);的2em，是相对于渐变轴度量的，另一方面，在background-size中的2em长度是背景贴片的宽度与高度。所以我们有两种方案来解决这个问题。

1. 如果要保持对角线的2em长度，就要将background-size乘以根号2（勾股定理）
2. 如果要保留水平和垂直方向上的2em长度，就要用切角渐变的角标位置除以根号二
   分别的代码如下:
   第一种：

/*切角角度 / 根号2，使其呈现45°切角*/
linear-gradient(-135deg, transparent 1.414em, #58a 0);

效果如下：

第二种：

/*背景大小变为原来的1.414倍，使切角的长宽刚好和折角的一样大*/
background-size: 2.828em 2.828em, auto;

更详细解释，请阅读css解密一书