DIV CSS 佈局教程網

這篇文章主要介紹了CSS三角箭頭應用實踐,主要分為用來制作對話框箭頭和下拉菜單箭頭等情況,需要的朋友可以參考下

用CSS來制作無圖片帶箭頭的DIV方框（此代碼比較適合追求純代碼者）
這類效果也可以用圖片背景來實現，代碼會更簡潔
CSS代碼：

CSS Code復制內容到剪貼板

1. div.container{position:absolute;
2. top:30px;
3. left:40px;
4. font-size: 9pt;
5. display:block;
6. height:100px;
7. width:200px;
8. background-color:transparent;
9. *border:1px solid #666;
10. }
11. s{
12. position:absolute;
13. top:-20px;
14. *top:-22px;
15. left:20px;
16. display:block;
17. height:0;
18. width:0;
19. font-size: 0;
20. line-height: 0;
21. border-color:transparent transparent #666 transparent;
22. border-style:dashed dashed solid dashed;
23. border-width:10px;
24. }
25. i{position:absolute;
26. top:-9px;
27. *top:-9px;
28. left:-10px;
29. display:block;
30. height:0;
31. width:0;
32. font-size: 0;
33. line-height: 0;
34. border-color:transparent transparent #fff transparent;
35. border-style:dashed dashed solid dashed;
36. border-width:10px;
37. }
38. .content{
39. border:1px solid #666;
40. -moz-border-radius:3px;
41. -webkit-border-radius:3px;
42. position:absolute;
43. background-color:#fff;
44. width:100%;
45. height:100%;
46. padding:5px;
47. *top:-2px;
48. *border-top:1px solid #666;
49. *border-top:1px solid #666;
50. *border-left:none;
51. *border-right:none;
52. *height:102px;
53. box-shadow: 3px 3px 4px #999;
54. -moz-box-shadow: 3px 3px 4px #999;
55. -webkit-box-shadow: 3px 3px 4px #999;
56. /* For IE 5.5 - 7 */
57. filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');
58. /* For IE 8 */
59. -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";
60. }

Html代碼：

XML/Html Code復制內容到剪貼板

1. <div class="container">
2. <div class="content">
3. <br>這是框中的文字，可動態顯示。高度自動增加，應該不錯吧^_^
4. </div>
5. <s>
6. <i></i>
7. </s>
8. </div>

效果圖：

這次介紹下CSS制作三角箭頭

通常，我們做上圖那個三角形，一般都是做張圖，而且需要兩張，因為一般都是下拉菜單的效果，需要有個hover的樣式，箭頭是反的。那是不是有更好的辦法呢，畢竟要用兩張圖片來解決這麼一個小問題太浪費資源了，於是，下面我要用純CSS的方法來解決這一問題，用到的只需CSS的一個屬性，就是border-width

我們先來看個樣式，如果設置元素邊框，會怎麼樣：

似乎看不出什麼，讓我給四個邊框加上不同的顏色吧再看看吧：

是不是發現了些什麼？對，讓我們把中間的文字去掉吧：

這樣，就出現4個三角形了，然後我們如果需要頂部那個三角形，只需要將border的left、right、bottom設置成背景色就行了：

這樣，我們需要的三角形就出現了，並且可以設置4個不同方向的了：

樣式代碼很簡單，就幾句話：

CSS Code復制內容到剪貼板

1. float: left;
2. border-style: solid; border-width: 10px;
3. border-color: #000 #ccc #ccc #ccc;
4. height: 0;
5. width: 0;
6. font-size: 0;

實際應用

比如我們要使用向下的箭頭(兼容IE6寫法)

Html代碼：

XML/Html Code復制內容到剪貼板

1. <div class="demo"><span class="bottom-arrow"></span></div>

CSS代碼：

CSS Code復制內容到剪貼板

1. .demo{position:relative}
2. .bottombottom-arrow{
3. position:absolute;
4. top:10px;
5. left:0px;
6. border-style:solid;
7. border-width:100px;
8. border-color:#000000 transparent transparent transparent;/*上邊框設置想要的顏色*/
9. height:0;
10. width:0;
11. font-size:0;
12. _border-color:#000000 tomato tomato tomato ; /*邊框透明色 For IE6-*/
13. _filter:chroma(color=tomato);/*邊框透明色 For IE6-*/
14. }

說明：
這裡的演示是用了邊框透明色，如果你用不到透明的話，直接設置border-color為你需要的顏色就可以了，免去為了兼容IE6的透明邊框濾鏡寫法
Chroma屬性可以設置一個對象中指定的顏色為透明色，它的表達式如下：

CSS Code復制內容到剪貼板

1. Filter：Chroma（color=color)

這個屬性的表達式是不是很簡單，它只有一個參數。只需把您想要指定透明的顏色用Color參數設置出來就可以了。