css制作实心、空心arrow箭头

使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码

效果图：

代码：

2. lang="en">
4. charset="UTF-8">
6. type="text/css">
7. /*实心箭头*/
8. .sx-arrow-down{
9. border-style:solid dashed dashed dashed;
10. border-width:10px;
11. border-color:#f00 transparent transparent transparent;
12. width:0;height:0;
13. }
14. .sx-arrow-up{
15. border-style:dashed dashed solid dashed;
16. border-color:transparent transparent #f00 transparent;
17. border-width:10px;
18. width:0;height:0;
19. }
20. .sx-arrow-left{
21. border-style:dashed dashed dashed solid;
22. border-color:transparent transparent transparent #f00;
23. border-width:10px;
24. width:0;height:0;
25. }
26. .sx-arrow-right{
27. border-style:dashed solid dashed dashed;
28. border-color:transparent #f00 transparent transparent;
29. border-width:10px;
30. width:0;height:0;
31. }
33. /* 空心箭头 */
34. i.kx-arrow{display:block;height:16px;width:16px;float:left;position:relative;
35. border:1px solid #000;margin-right:5px;
36. }
37. em,span{width:0;height:0;
38. border-color:transparent;
39. position:absolute;
40. }
41.  
42.  
43. i.kx-arrow-up em{
44. border-width:8px; /*边框的高度*/
45. border-style:solid dashed dashed dashed;
46. border-top-color:#999; /*边框的颜色*/
47. top:2px; /*边框的厚度*/
48. left:0;
49. }
50. i.kx-arrow-up span{
51. border-width:8px; /*边框的高度*/
52. border-style:solid dashed dashed dashed;
53. top:0;
54. left:0;
55. border-top-color:#fff;/*用白色边框绝对定位盖住多余的部分*/
56. }
57.  
58.  
59. i.kx-arrow-left em{
60. border-width:8px; /*边框的高度*/
61. border-style:dashed dashed dashed solid;
62. border-left-color:#999; /*边框的颜色*/
63. top:0;
64. left:2px; /*边框的厚度*/
65. }
66. i.kx-arrow-left span{
67. border-width:8px; /*边框的高度*/
68. border-style:dashed dashed dashed solid;
69. top:0;
70. left:0;
71. border-left-color:#fff;/*用白色边框绝对定位盖住多余的部分*/
72. }
73.  
74. i.kx-arrow-right em{
75. border-width:8px; /*边框的高度*/
76. border-style:dashed solid dashed dashed;
77. border-right-color:#999; /*边框的颜色*/
78. top:0;
79. right:2px; /*边框的厚度*/
80. }
81. i.kx-arrow-right span{
82. border-width:8px; /*边框的高度*/
83. border-style:dashed solid dashed dashed;
84. top:0;
85. right:0;
86. border-right-color:#fff;/*用白色边框绝对定位盖住多余的部分*/
87. }
88.  
89. i.kx-arrow-down em{
90. border-width:8px; /*边框的高度*/
91. border-style:dashed dashed solid dashed;
92. border-bottom-color:#999; /*边框的颜色*/
93. left:0;
94. bottom:2px; /*边框的厚度*/
95.  
96. }
97. i.kx-arrow-down span{
98. border-width:8px; /*边框的高度*/
99. border-style:dashed dashed solid dashed;
100. left:0;
101. bottom:0;
102. border-bottom-color:#fff;/*用白色边框绝对定位盖住多余的部分*/
103. }
104.  
106. /*box-shadow妙用*/
107. .icon{display:inline-block;width:31px; height:31px;line-height:31px; text-align:center;background:none; margin:50px; border-radius:50%; box-shadow:0 0 0 1px #ccc inset; transition:box-shadow 0.25s ease 0s; position:relative; cursor:pointer;}
108. .icon:hover{box-shadow: 0 0 0 16px #003366 inset;}
109. .icon:hover{color:#fff;}
113. 1、 mk-less教程有三角形制作
114. 2、三角形制作工具推荐
116. 

117. ======================实心三角形=============
118. class="sx-arrow-up">




class="sx-arrow-down">




class="sx-arrow-left">




class="sx-arrow-right">

 

======================空心三角形=============




class="kx-arrow kx-arrow-up">




class="kx-arrow kx-arrow-left">




class="kx-arrow kx-arrow-right">




class="kx-arrow kx-arrow-down">

 




======================box-shadow=============




class="icon">a