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

.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;
}

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

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

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