css实现简约的纸张卷⾓效果
英⽂原⽂
本⽂最先发表在我的个⼈⽹站：
这篇⽂章中我们将介绍如何制做paper左上⾓的卷⾓效果。
我想让我的⼏句⽂字以⼀张有卷⾓折叠效果的纸为背景，如果直接⽤⼀张图⽚，很容易实现，但是这⾥我要⽤css来实现。
我的这种实现⽅法并不是⾮常具有创新意义，但是还是值得拿出来分享的，简单的来说，除了⼀个矩形容器以外，我们还需要两个三⾓形，如下图所⽰：
当我们得到两个三⾓形并定位好之后，改变上⾯的三⾓形的颜⾊，使之和整个背景⾊⼀样。你会发现我们已经制作出了折叠的效果了。
html代码
⾸先创建⼀个如下的div，包含⼀个标题，和⼀段⽂字内容。div有两个class，⼀个（page)是设定⼀般的page效果，另外⼀个(foldtl)设定纸张的卷⾓效果，foldtl的tl代表top left，另外我们还在最后top right的折叠效果。
1 2<div class="page foldtl"> <h2>Headline</h2>
3 4 5
<p>Lorem ipsum dolor </p> </div>
</div>
css部分
css部分，我先做好⼀张没有卷⾓效果的普通纸：设置背景⾊为醒⽬舒服的⿊⾊，然后设置纸张的宽度和⾼度，并填充⽩⾊背景。还可以给纸的背景添加⼀个微妙的渐变效果，你也可以不这么做，因为css⾥⾯实现这个要⽤到不是很标准的代码，以适应不同的浏览器。如果你认为这样是不值得的，忽略之。下⾯是代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19body {
background:#272822;
}
.page {
background:#fff;
width: 250px;
height: 330px;
margin: 50px;
/* Optional Gradient */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* W3C */
filter: progid:adient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */ }
现在我们得到了纸的轮廓效果了，该来美化⼀下我们的字体了。h2标签设置为较⼤的⿊⾊字体，并且远离上边界，给左上⾓的折叠效果留下⼀定空间。段落⾥⾯的字体：设置⼀定的padding，颜⾊为灰⾊，并且和标题相隔⼀段合适的距离。
1 2 3 4 5 6 7 8 9 10.page h2 {
padding: 85px 0 0 20px;
font: 400 35px/1.5'Lilita One', Helvetica, sans-serif; }
.page p {
padding: 10px 20px;
font: 12px/1.5 Helvetica, sans-serif;
color:#4b4b4b;
}
如果没出什么情况上⾯的代码应该会显⽰出下⾯的效果，不是那么耐看，但是为我们后⾯打下了⼀个基础。
css三⾓形部分：
在继续开⼯之前，我们需要学会如何⽤css制作三⾓形。
创建⼀个class为“triangle”的空div
宽度和⾼度设置为0
给下边框和左边框⼀个很厚的宽度，但是要是不同的颜⾊
效果和css代码如下图：
就如你看到的，矩形被对⾓线分割成了两个颜⾊不同的三⾓形。假如我们让其中的⼀个边框变成透明会出现什么情况呢？
这样我们就能得到⼀个三⾓形了，⽽且还可以换⼀个border设置成透明，那样就能得到⼀个指向不同的三⾓形。
⾄于是上边界 下边界 左边界 右边界你⾃⼰试试就知道了。
将纸卷起来：
将我们刚刚学到的三⾓形制作⽤到我们的纸上。需要三个步骤：
1.foldtl（上⾯提到过） div的css样式。
2.添加⼀个三⾓形，⽤伪元素:before
3.添加另⼀个三⾓形，⽤伪元素:after
下⾯来讲解着三个步骤：
1 2 3 4 5 6.foldtl {
position: relative;
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.8); -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.8); box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
}
就如你看到的，我只是给div应⽤了相对定位（为了三⾓形中使⽤绝对定位），然后再添加⼀个盒⼦阴影效果。顺便说⼀句，这个项⽬中不使⽤阴影的话会简单很多，我只是为了告诉你，这样做确实可⾏，只需注意给阴影⼀个⾜够的偏移，⼀⾯挡住折叠的效果。
现在该制作第⼀个三⾓形了。这是⼀个伪元素，绝对定位，并且x和y的值都为0，其他的就和我们学到的制作三⾓形的css⼀样了。
1 2 3 4 5 6 7 8 9 10 11 12 13.foldtl:before {
content:"";
position: absolute;
top: 0%;
left: 0%;
width: 0px;
height: 0px;
border-bottom: 70px solid#eee;
border-left: 70px solid transparent;
-webkit-box-shadow: 7px 7px 7px rgba(0,0,0,0.3); -moz-box-shadow: 7px 7px 7px rgba(0,0,0,0.3); box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
}
如图：
裁剪：
裁剪其实就是在左上⾓再做⼀个和⿊⾊背景颜⾊相同的三⾓形，⽅法基本和第⼀个三⾓形⼀样。
1 2 3 4 5 6 7 8 9 10.foldtl:after {
content:"";
position: absolute;
top: 0%;
left: 0%;
width: 0px;
height: 0px;css特效文字
border-top: 69px solid#272822; border-right: 69px solid transparent; }
现在我们的整个效果就出来了：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。