我們有時候想在頁面顯示一個公告或用戶提示信息。
一個經常使用設計是使用書簽形狀。
我們能夠給書簽加入卷角效果。以使其更為逼真。所謂的“卷角”實際上能夠用小角度傾斜的陰影效果來模擬。
用CSS3的偽元素實現這個效果非常easy。
先給出一個實例。我們在WOW網站頁面左邊欄實現了例如以下的效果（紅框內）：
我們再來看看詳細實現。
首先創建一個div元素容納文本信息（能夠包括很多其它元素），class取名為“狗耳朵”也就是卷角的意思：
<div class="dog-eared-tip">put your tips here</div>
然后編寫例如以下的CSS代碼：
.dog-eared-tip{
padding: 7.5px 5px 7.5px 20px;
background: #DEAA2F;
font-size: 13px;
position: absolute;
text-align: center;
width: 100%;
color: black;
}
.dog-eared_tip:before, .work_tip:after {
content: "";
position: absolute;
z-index: -2;
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
bottom: 15px;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
height: 50%;
left: 10px;
max-height: 100px;
max-width: 300px;
width: 50%;
}
.dog-eared_tip:after {
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
left: auto;
right: 10px;
}
上面的代碼首先設置了div的經常使用樣式如底色、字體、居中、邊距等。
然后為該div的:before和:after偽元素設置框陰影（box-shadow）和小角度旋轉（rotate方法），
並把before和after的位置放在div的底部，而且z序列為負數。這種實際效果就是偽元素本身被div所遮擋。可是剛好使得其外圍陰影部分露出底部。
注意，這里請記得不要給div設置overflow不可見的樣式。否則陰影不可見。
基本上好了，還差最后一步，兩邊陰影的傾斜度在物理學上是對稱的，所以我們還須要調整一下:after偽元素的傾斜角度（-3°調整為3°）。
這樣:before相應於標簽的左下邊角。:after相應於標簽的右下邊角的卷曲陰影。
本例在IE11/Chrome/FF/Edge下能夠工作。
你還能夠使用CSS3中的偽類:hover和transition屬性。在本例基礎上加入鼠標懸停效果，
也就是當用戶懸停在書頁上時。呈現卷角被緩緩撫平的效果，我們把這個稱之為“會呼吸的紙”。
詳細可參考WOW首頁的實現。