CSS 中使用 div 元素創建一個帶箭頭的效果非常簡單。我們可以通過設置 div 的 border 來實現這個效果，同時利用 CSS 的 transform 屬性來旋轉箭頭。

.arrow {
position: relative;
width: 100px;
height: 50px;
border: 10px solid #000;
border-bottom: none;
}
.arrow::before {
content: "";
position: absolute;
top: -20px;
left: 45px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #000;
transform: rotate(180deg);
}

上面的代碼中，我們創建了一個名為 "arrow" 的 div 元素，設置它的寬度、高度和邊框樣式。為了讓箭頭出現在 div 元素的頂部，我們需要將它的下邊框去掉，這可以通過設置 border-bottom:none 來實現。

接著，我們使用 :before 選擇器創建一個偽元素，它將作為箭頭使用。這個偽元素的樣式設置了它的位置、大小和邊框樣式。為了讓箭頭成為一個倒三角形，我們設置了它的左右兩側邊框為透明，并且只設置了下邊框的樣式。最后，我們使用 transform: rotate(180deg) 來讓箭頭旋轉 180 度，使它變成一個倒三角形。