html书页卷角效果,HTML+CSS网页制作实例制作左上角卷角效果的网页

网页制作网络技术需要大家共同分享，不能闭门造车，下面是bj-dns文章简介：HTML+CSS网页制作实例:制作左上角卷角效果的网页.

英文原文

这篇文章中我们将介绍如何制做paper左上角的卷角效果。

我想让我的几句文字以一张有卷角折叠效果的纸为背景，如果直接用一张图片，很容易实现，但是这里我要用css来实现。

我的这种实现方法并不是非常具有创新意义，但是还是值得拿出来分享的，简单的来说，除了一个矩形容器以外，我们还需要两个三角形，如下图所示：

当我们得到两个三角形并定位好之后，改变上面的三角形的颜色，使之和整个背景色一样。你会发现我们已经制作出了折叠的效果了。

html代码

首先创建一个如下的div，包含一个标题，和一段文字内容。div有两个class，一个(page)是设定一般的page效果，另外一个(foldtl)设定纸张的卷角效果，foldtl的tl代表top left，另外我们还在最后top right的折叠效果。