CSS撕頁，顧名思義就是在網頁中讓元素被撕下來的效果，通過CSS代碼的實現可以讓網頁更加生動有趣。

下面是一段實現簡單CSS撕頁效果的代碼示例：

html, body {
height: 100%;
}
body {
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
position: relative;
width: 400px;
height: 600px;
margin: 20px;
overflow: hidden;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.wrapper:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: top right;
background-color: #fff;
box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.5s ease;
}
.wrapper:hover:before {
transform: rotate(45deg);
}

上面的代碼使用了偽元素:before實現了撕頁效果。可以看到，在.wrapper元素上絕對定位一個:before偽元素，然后通過:hover偽類觸發變形轉換。

通過上面的示例代碼我們就可以很簡單地實現一個CSS撕頁的效果，讓網頁內容更加豐富。