這是一篇關于css信封案例的文章。我們先來看一下這個案例的效果圖：

+------------------------+
|                        |
|   客戶回饋問卷調查   |
|                        |
|                        |
|   ___________________  |
|  |                   | |
|  |                   | |
|  |                   | |
|  |                   | |
|  |                   | |
|  |                   | |
|  |                   | |
|  |___________________| |
|                        |
+------------------------+

這個案例使用了純css實現了一個信封的形狀。我們來看一下具體的實現方法：

.envelop {
position: relative;
width: 300px;
height: 200px;
background-color: #EEE;
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.envelop:before {
content: "";
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 150px solid #EEE;
border-bottom: 20px solid transparent;
}
.envelop:after {
content: "";
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-top: 20px solid transparent;
border-right: 150px solid #EEE;
border-bottom: 20px solid transparent;
}
.envelop-body {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 70%;
background-color: #FFF;
}
.envelop-body:before {
content: "";
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-top: 10px solid transparent;
border-left: 150px solid #FFF;
border-bottom: 10px solid transparent;
}
.envelop-body:after {
content: "";
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 150px solid #FFF;
border-bottom: 10px solid transparent;
}

我們定義了一個樣式名為.envelop的元素來創建信封的基本框架。通過:before和:after偽元素，我們分別定義了信封的上半部分和下半部分的樣式。

最后，通過.envelop-body元素來創建信封里面的身體部分，同樣使用:before和:after偽元素來創造身體部分的上半部分和下半部分的樣式。

最后，我們在.envelop-body元素里面填充了需要展示的內容，這里是客戶回饋問卷調查。

通過這個簡單的案例，我們可以看到css使用偽元素的強大，可以實現很多形狀的創造。