利用HTML+CSS制作左上角卷角效果的網(wǎng)頁的方法

2024-07-11 08:48:21

字體：大中小

供稿：網(wǎng)友

英文原文 http://designshack.net/articles/css/code-a-simple-folded-corner-effect-with-css/
這篇文章中我們將介紹如何制做paper左上角的卷角效果。
我想讓我的幾句文字以一張有卷角折疊效果的紙為背景，如果直接用一張圖片，很容易實(shí)現(xiàn)，但是這里我要用css來實(shí)現(xiàn)。

我的這種實(shí)現(xiàn)方法并不是非常具有創(chuàng)新意義，但是還是值得拿出來分享的，簡(jiǎn)單的來說，除了一個(gè)矩形容器以外，我們還需要兩個(gè)三角形，如下圖所示：
screenshot

當(dāng)我們得到兩個(gè)三角形并定位好之后，改變上面的三角形的顏色，使之和整個(gè)背景色一樣。你會(huì)發(fā)現(xiàn)我們已經(jīng)制作出了折疊的效果了。
screenshot

html代碼
首先創(chuàng)建一個(gè)如下的div，包含一個(gè)標(biāo)題，和一段文字內(nèi)容。div有兩個(gè)class，一個(gè)（page)是設(shè)定一般的page效果，另外一個(gè)(foldtl)設(shè)定紙張的卷角效果，foldtl的tl代表top left，另外我們還在最后top right的折疊效果。
<div class="page foldtl"> <h2>Headline</h2> <p>Lorem ipsum dolor sit amet...</p> </div> </div>
css部分
css部分，我先做好一張沒有卷角效果的普通紙：設(shè)置背景色為醒目舒服的黑色，然后設(shè)置紙張的寬度和高度，并填充白色背景。還可以給紙的背景添加一個(gè)微妙的漸變效果，你也可以不這么做，因?yàn)閏ss里面實(shí)現(xiàn)這個(gè)要用到不是很標(biāo)準(zhǔn)的代碼，以適應(yīng)不同的瀏覽器。如果你認(rèn)為這樣是不值得的，忽略之。下面是代碼：
body { 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:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */ }
現(xiàn)在我們得到了紙的輪廓效果了，該來美化一下我們的字體了。h2標(biāo)簽設(shè)置為較大的黑色字體Lilita One，并且遠(yuǎn)離上邊界，給左上角的折疊效果留下一定空間。段落里面的字體：設(shè)置一定的padding，顏色為灰色，并且和標(biāo)題相隔一段合適的距離。
.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; }
如果沒出什么情況上面的代碼應(yīng)該會(huì)顯示出下面的效果，不是那么耐看，但是為我們后面打下了一個(gè)基礎(chǔ)。
screenshot

css三角形部分：

在繼續(xù)開工之前，我們需要學(xué)會(huì)如何用css制作三角形。
創(chuàng)建一個(gè)class為“triangle”的空div
寬度和高度設(shè)置為0
給下邊框和左邊框一個(gè)很厚的寬度，但是要是不同的顏色
效果和css代碼如下圖：

screenshot

就如你看到的，矩形被對(duì)角線分割成了兩個(gè)顏色不同的三角形。假如我們讓其中的一個(gè)邊框變成透明會(huì)出現(xiàn)什么情況呢？

screenshot

這樣我們就能得到一個(gè)三角形了，而且還可以換一個(gè)border設(shè)置成透明，那樣就能得到一個(gè)指向不同的三角形。

screenshot

至于是上邊界下邊界左邊界右邊界你自己試試就知道了。
將紙卷起來：
將我們剛剛學(xué)到的三角形制作用到我們的紙上。需要三個(gè)步驟：
1.foldtl（上面提到過） div的css樣式。
2.添加一個(gè)三角形，用偽元素:before
3.添加另一個(gè)三角形，用偽元素:after
下面來講解著三個(gè)步驟：

.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應(yīng)用了相對(duì)定位（為了三角形中使用絕對(duì)定位），然后再添加一個(gè)盒子陰影效果。順便說一句，這個(gè)項(xiàng)目中不使用陰影的話會(huì)簡(jiǎn)單很多，我只是為了告訴你，這樣做確實(shí)可行，只需注意給陰影一個(gè)足夠的偏移，一面擋住折疊的效果。

現(xiàn)在該制作第一個(gè)三角形了。這是一個(gè)偽元素，絕對(duì)定位，并且x和y的值都為0，其他的就和我們學(xué)到的制作三角形的css一樣了。

.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); }
如圖：

screenshot

裁剪：

裁剪其實(shí)就是在左上角再做一個(gè)和黑色背景顏色相同的三角形，方法基本和第一個(gè)三角形一樣。
.foldtl:after { content: ""; position: absolute; top: 0%; left: 0%; width: 0px; height: 0px; border-top: 69px solid #272822; border-right: 69px solid transparent; }
現(xiàn)在我們的整個(gè)效果就出來了：
screenshot