css实现简约的纸张卷角效果
英文原文 http://designshack.net/articles/css/code-a-simple-folded-corner-effect-with-css/
本文最先发表在我的个人网站：http://jcodecraeer.com/a/cssjiqiaoyuguifan/2012/0628/289.html
这篇文章中我们将介绍如何制做paper左上角的卷角效果。
我想让我的几句文字以一张有卷角折叠效果的纸为背景，如果直接用一张图片，很容易实现，但是这里我要用css来实现。
我的这种实现方法并不是非常具有创新意义，但是还是值得拿出来分享的，简单的来说，除了一个矩形容器以外，我们还需要两个三角形，如下图所示：
当我们得到两个三角形并定位好之后，改变上面的三角形的颜色，使之和整个背景色一样。你会发现我们已经制作出了折叠的效果了。
html代码
首先创建一个如下的div，包含一个标题，和一段文字内容。div有两个class，一个（page)是设定一般的page效果，另外一个(foldtl)设定纸张的卷角效果，foldtl的tl代表top left，另外我们还在最后top right的折叠效果。
css三角形部分：
在继续开工之前，我们需要学会如何用css制作三角形。
创建一个class为“triangle”的空div
宽度和高度设置为0
给下边框和左边框一个很厚的宽度，但是要是不同的颜色
效果和css代码如下图：
就如你看到的，矩形被对角线分割成了两个颜色不同的三角形。假如我们让其中的一个边框变成透明会出现什么情况呢？
这样我们就能得到一个三角形了，而且还可以换一个border设置成透明，那样就能得到一个指向不同的三角形。
至于是上边界 下边界 左边界 右边界你自己试试就知道了。
将纸卷起来：
将我们刚刚学到的三角形制作用到我们的纸上。需要三个步骤：
1.foldtl（上面提到过） div的css样式。
2.添加一个三角形，用伪元素
裁剪：
裁剪其实就是在左上角再做一个和黑色背景颜色相同的三角形，方法基本和第一个三角形一样。
