CSS3圖形編碼技術的應用越來越廣泛，今天我們來講一下如何使用CSS3圖形編碼實現一個漂亮的信封效果。

.envelope {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
background-color: #FFF;
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}
.envelope:before,
.envelope:after {
content: "";
position: absolute;
background-color: #FFF;
}
.envelope:before {
top: 0;
left: 0;
width: 50%;
height: 100%;
box-shadow: inset 0 0 20px rgba(0,0,0,.1);
transform-origin: right center;
transform: skew(10deg) scaleX(1.5);
}
.envelope:after {
top: 0;
right: 0;
width: 50%;
height: 100%;
box-shadow: inset 0 0 20px rgba(0,0,0,.1);
transform-origin: left center;
transform: skew(-10deg) scaleX(1.5);
}
.envelope .address {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 250px;
height: 100px;
background-color: #EEE;
border: 1px solid #666;
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}

這段代碼實現了一個信封效果，信封主體使用一個300px*200px的DIV元素模擬。接著通過偽元素:before和:after分別模擬信封左側和右側的三角效果。:before和:after分別代表信封覆蓋在信封背面的左側和右側。

信封主體上有一個.address元素，它用來顯示收件人地址。.address元素在信封中央，并使用border和box-shadow來增加邊框和立體效果。