CSS3提供了很多有趣實用、好玩的樣式特效，其中之一就是會話箭頭。
會話箭頭可以在氣泡對話框和引導頁中使用。作為一個交互設計師或前端開發者，了解和掌握這一技能是很有必要的。
CSS3實現會話箭頭的方法也很簡單，可以用:before或:after來添加內容，并且用旋轉（transform:rotate）來控制箭頭的方向。
看下面的示例代碼，我們來具體了解這個方法的實現：

.arrow-top {
position: relative;
background-color: #FFF;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
padding: 10px;
margin: 50px auto;
text-align: center;
width: 200px;
}
.arrow-top:before {
content: '';
position: absolute;
left: 50%;
margin-left: -10px;
top: -20px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #FFF;
}

上面的代碼中，我們設置了一個容器div，也就是會話框，并且用:before添加了一個箭頭方向為上的三角形。由于三角形是用css的border屬性繪制的，所以我們可以輕松通過修改邊框大小（border-width）和顏色（border-color）來實現不同效果。
然后，在容器div上設置圓角、陰影等效果，這樣可以使會話框更加美觀。
如果我們需要使箭頭方向向下或者左右，只需要將:before或:after的邊框屬性調整一下就可以了。
總之，通過向div中添加:before或:after內容，再利用旋轉，我們就可以輕松控制箭頭的方向，實現不同樣式的會話箭頭了。