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>