最终效果
制作步骤
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>
一定要使劲点一下