原理很简单，就是画出一个元素的两个边框，然后旋转，就是勾的样式，效果图如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/*外边框样式*/
.out-border{
border: solid 1px #626262;
display: inline-block;
width:26px;
height: 26px;
}
/*画勾，原理就是画两边加上旋转*/
.hook{
display: inline-block;
width:6px;
height: 16px;
border-bottom: 2px solid #3A3A3A;
border-right: 2px solid #3A3A3A;
margin-left: 8px;
margin-top: 2px;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
</style>
</head>
<body>
<div>
<div class="out-border">
<span class="hook"></span>
</div>
</div>
</body>
</html>
如果要做成复选框，再加上input标签加以样式控件，就可以做出复选框按钮了！