一、勾
<style>
a{ display: inline-block; width: 10px;height:5px; background: red;line-height: 0;font-size:0;vertical-align: middle;-webkit-transform: rotate(45deg);}
a:after{content:'/';display:block;width: 20px;height:5px; background: red;-webkit-transform: rotate(-90deg) translateY(-50%) translateX(50%);}
#test{width:100px;height:100px; padding: 50px;}
</style>
<div id="test">
<a></a>
</div>
二、叉
<style>
a{ display: inline-block; width: 20px;height:5px; background: red;line-height: 0;font-size:0;vertical-align: middle;-webkit-transform: rotate(45deg);}
a:after{content:'/';display:block;width: 20px;height:5px; background: red;-webkit-transform: rotate(-90deg);}
#test{width:100px;height:100px; padding: 50px;}
</style>
<div id="test">
<a></a>
</div>