CSS3 制作向左、向右及关闭图标的效果 (另一种思路)

浏览数：30 / 时间：2015年06月09日

最终效果

制作步骤

1.边框

CSS及Html代码

显示效果

2.向左的标志

CSS及Html代码，增加的代码在黄色范围内

显示效果

方向不对了，马上修改一下方向，逆时针旋转45度调整一下

CSS及Html代码

这回再看看效果

这样就对了

3.用类似的方法做出向右和关闭的效果，大功告成。

完整代码：

 1 <style>
 2 
 3 .displayInlineBlock{
 4   display: inline-block;
 5 }
 6 
 7 .circle{
 8   margin: 0px 10px 0px 10px;
 9   width: 20px;
10   height: 20px;
11   border: 2px solid #87CEFF;
12   border-radius: 20px;
13   background: #BFEFFF;
14   cursor: pointer;
15 }
16 
17 .circle:hover {
18   background: #87CEFF;
19 }
20 
21 .arrow{
22   width: 7px;
23   height: 7px;
24   border-top: 2px solid #fff;
25   border-left: 2px solid #fff;
26 }
27 
28 .arrowLeftDiv{
29   margin: 5.5px 0px 0px 7px;
30 }
31 
32 .arrowRightDiv{
33   margin: 5.5px 0px 0px 4px;
34 }
35 
36 .closeDiv{
37   margin: 4px 0px 0px 2.5px;
38 }
39 
40 .closeArrowLeft{
41   width: 6px;
42   height: 6px;
43   border-right: 2px solid #fff;
44   border-bottom: 2px solid #fff;
45 }
46 
47 .closeArrowRight{
48   margin: -2px 0px 0px 6px;
49   width: 6px;
50   height: 6px;
51   border-top: 2px solid #fff;
52   border-left: 2px solid #fff;
53 }
54 
55 .rotate45{
56   -webkit-transform: rotate(45deg);
57   transform: rotate(45deg);
58 }
59 
60 .rotate135{
61   -webkit-transform: rotate(135deg);
62   transform: rotate(135deg);
63 }
64 
65 .rotate315{
66   -webkit-transform: rotate(-45deg);
67   transform: rotate(-45deg);
68 }
69 
70 
71 </style>
72 
73 <div class="circle displayInlineBlock">
74   <div class="arrow arrowLeftDiv rotate315"></div>
75 </div>
76 
77 <div class="circle displayInlineBlock">
78   <div class="arrow arrowRightDiv rotate135"></div>
79 </div>
80 
81 <div class="circle displayInlineBlock">
82   <div class="closeDiv rotate45">
83     <div class="closeArrowLeft"></div>
84     <div class="closeArrowRight"></div>
85   </div>
86 </div>