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>