我們有時候想在頁面顯示一個公告或用戶提示信息。一個常用設計是使用書籤形狀。
我們可以給書籤添加捲角效果，以使其更爲逼真。所謂的“卷角”實際上可以用小角度傾斜的陰影效果來模擬。
用CSS3的僞元素實現這個效果很容易。
先給出一個實例，我們在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首頁的實現。