在CSS書寫排版樣式時，我們可以用到一些很有趣的設計元素，比如建筑插畫。建筑插畫是指通過繪制建筑構造體系的圖案，來增強排版的視覺效果，為頁面增添生機和趣味性。接下來，我們就來討論一下如何在CSS中使用建筑插畫。

.building {
width: 200px; 
height: 200px; 
margin: 20px; 
position: relative;
background-color: #f1f1f1;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); 
overflow: hidden;
}
.building:before,
.building:after {
content: "";
position: absolute; 
width: 100px; 
height: 100px; 
background-color: #dfdfdf;
z-index: -1;
}
.building:before {
top: -50px; 
left: -50px; 
transform: rotate(45deg);
}
.building:after {
bottom: -50px; 
right: -50px;
transform: rotate(-45deg);
}

以上代碼是一個簡單的建筑插畫樣式示例。我們把一個div元素設置為.building類名，先設置寬高和邊距，再加上了position:relative屬性，后續添加絕對定位元素時容器將作為實際定位基準。用了背景顏色和陰影，讓我們的元素更加具有立體感。

接下來要實現的是添加圖案，我們添加了一個偽類:before和一個偽類:after元素，使用content: ""添加空內容，default內容可以為文字也可以為空（怕程序錯誤而設置）。利用偽類元素，我們可以在一個div內部創建出兩個三角形。設置寬高、顏色、z-index等CSS屬性，實現兩個三角形的效果。上三角：top: -50px; left: -50px; transform: rotate(45deg); 下三角：bottom: -50px; right: -50px; transform: rotate(-45deg); 分別設置絕對定位及旋轉等CSS屬性即可。

嘗試將上述代碼復制到你的CSS樣式表中嘗試一下，可以自行調整width、height和背景顏色的值，來觀察此建筑插畫在樣式中的效果。祝你寫出更加豐富、美觀的頁面設計。