在CSS中，我們可以使用偽元素：before和after來創建許多有趣的圖案。其中一個例子就是向上的空心三角形。

.triangle {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #fff;
position: relative;
}
.triangle::before {
content: "";
position: absolute;
top: -20px;
left: -20px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #ccc;
}

這段代碼中，我們首先設置了 .triangle 元素的寬和高都為 0。然后我們通過設置元素的邊框來構建三角形。左右兩個邊框設置為 “transparent” 是為了讓三角形的邊框看上去是空心的。

為了讓三角形垂直居中，我們設置了 .triangle 元素的 position 值為 relative。接下來，我們使用 ::before 偽元素來創建三角形的空心部分。要注意的是，我們讓 ::before 元素的位置移到了父元素的上方，并且把它的邊框顏色設置成了灰色。

通過這段代碼，我們可以輕松地創建出一個漂亮的向上的空心三角形。