用css中的邊框border製作箭頭對話框

在css中，經常會用到元素的border屬性，用來給元素添加邊框。其實除了用來製作邊框，border還有個巧妙的用法，可以用來製作箭頭對話框。

首先，我們了解一下border的本來面目。給一個div添加以下樣式

{

display:inline-block;

border: 10px solid;

border-top-color: green;

border-right-color: #ddd;

border-bottom-color: blue;

border-left-color: darkslategray;

}

為了方便區分，分別把div的四個邊框設置成四種不同的顏色，並且不給div添加尺寸。瀏覽器中顯示的效果是這樣的：

可以看到，元素的四個邊框以45度切角相接，當元素沒有內容及內邊距時，元素的邊框實際上變成了四個倒三角（像小時候玩的紙元寶）。這時候就可以利用邊框去做一些特別的效果了，例如：箭頭。給div添加下面的樣式

{

display: inline-block;

border: 10px solid #fff;

border-right-color: #ddd;

border-left-width: 0;

}

其中將div的上、下、左邊框設置為白色，右邊框設置為灰色，並且將左邊框的寬度設置為0。瀏覽器中顯示的效果是這樣的：

箭頭

可以看到，得到了一個向左的箭頭（就把它當做箭頭吧）。這時再配合其他元素，便可以做類似出箭頭對話框的效果了。

箭頭對話框

做法簡單，算作拋磚引玉吧。大神們還有哪些css的巧妙用法，可以留言交流。