CSS3提供了豐富的樣式效果，其中之一是使用div和三角箭頭實(shí)現(xiàn)更多樣的UI設(shè)計(jì)。下面是一個(gè)使用CSS3實(shí)現(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)建一個(gè)div元素，并給它一個(gè)背景顏色和一些內(nèi)邊距，這樣我們就可以在這個(gè)div中放入其他的元素。然后，我們給這個(gè)div添加一個(gè)偽元素:before，通過這個(gè)偽元素來創(chuàng)建一個(gè)三角箭頭。在這個(gè)偽元素的樣式中，我們使用了絕對(duì)定位和相對(duì)定位來實(shí)現(xiàn)正確的位置，具體來說，我們將這個(gè)偽元素的top屬性設(shè)為-10px，left屬性設(shè)為50%，使得它在父元素的正中間，而且是覆蓋在父元素之上的。接著，我們?cè)O(shè)置三角箭頭的邊框（border），用不同的顏色和樣式來填充它。最后，我們使用transform屬性來水平居中這個(gè)三角箭頭。這就是一個(gè)非常簡(jiǎn)單的使用CSS3實(shí)現(xiàn)div帶三角箭頭的例子。