CSS3提供了豐富的樣式效果，其中之一是使用div和三角箭頭實現(xiàn)更多樣的UI設(shè)計。下面是一個使用CSS3實現(xiàn)的div帶三角箭頭的例子：

.arrow-div {
position: relative;
padding: 10px;
background-color: #f7f7f7;
}
.arrow-div:before {
content: "";
position: absolute;
top: -10px;
left: 50%;
border-width: 10px;
border-style: solid;
border-color: transparent transparent #f7f7f7 transparent;
transform: translateX(-50%);
}

上面的代碼中，我們首先創(chuàng)建一個div元素，并給它一個背景顏色和一些內(nèi)邊距，這樣我們就可以在這個div中放入其他的元素。然后，我們給這個div添加一個偽元素:before，通過這個偽元素來創(chuàng)建一個三角箭頭。在這個偽元素的樣式中，我們使用了絕對定位和相對定位來實現(xiàn)正確的位置，具體來說，我們將這個偽元素的top屬性設(shè)為-10px，left屬性設(shè)為50%，使得它在父元素的正中間，而且是覆蓋在父元素之上的。接著，我們設(shè)置三角箭頭的邊框（border），用不同的顏色和樣式來填充它。最后，我們使用transform屬性來水平居中這個三角箭頭。這就是一個非常簡單的使用CSS3實現(xiàn)div帶三角箭頭的例子。