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

最终效果

制作步骤

1.边框

CSS及Html代码

显示效果

2.向左的标志

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

显示效果

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

CSS及Html代码

这回再看看效果

这样就对了

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

完整代码：

 <style>

 .displayInlineBlock{
   display: inline-block;
 }

 .circle{
   margin: 0px 10px 0px 10px;
   width: 20px;
   height: 20px;
   border: 2px solid #87CEFF;
   border-radius: 20px;
   background: #BFEFFF;
   cursor: pointer;
 }

 .circle:hover {
   background: #87CEFF;
 }

 .arrow{
   width: 7px;
   height: 7px;
   border-top: 2px solid #fff;
   border-left: 2px solid #fff;
 }

 .arrowLeftDiv{
   margin: 5.5px 0px 0px 7px;
 }

 .arrowRightDiv{
   margin: 5.5px 0px 0px 4px;
 }

 .closeDiv{
   margin: 4px 0px 0px 2.5px;
 }

 .closeArrowLeft{
   width: 6px;
   height: 6px;
   border-right: 2px solid #fff;
   border-bottom: 2px solid #fff;
 }

 .closeArrowRight{
   margin: -2px 0px 0px 6px;
   width: 6px;
   height: 6px;
   border-top: 2px solid #fff;
   border-left: 2px solid #fff;
 }

 .rotate45{
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
 }

 .rotate135{
   -webkit-transform: rotate(135deg);
   transform: rotate(135deg);
 }

 .rotate315{
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }

 </style>

 <div class="circle displayInlineBlock">
   <div class="arrow arrowLeftDiv rotate315"></div>
 </div>

 <div class="circle displayInlineBlock">
   <div class="arrow arrowRightDiv rotate135"></div>
 </div>

 <div class="circle displayInlineBlock">
   <div class="closeDiv rotate45">
     <div class="closeArrowLeft"></div>
     <div class="closeArrowRight"></div>
   </div>
 </div>

一定要使劲点一下