使用纯CSS实现大于号小于号关闭X样式

.gt{    //大于号>
    width: 20px;  
    height: 20px;  
    position: absolute;  
    border-left: 1px solid #000;  
    border-bottom: 1px solid #000;  
    -webkit-transform: translate(0,-50%) rotate(-135deg);  
    transform: translate(0,-50%) rotate(-135deg);  
}
.lt{    //小于号<
    width: 20px;  
    height: 20px;  
    position: absolute;  
    border-left: 1px solid #000;  
    border-bottom: 1px solid #000;  
    -webkit-transform: translate(0,-50%) rotate(-135deg);  
    transform: translate(0,-50%) rotate(-45deg);  
}
.close{ //关闭按钮x
    position:relative;
    width:0.3em;
    height:1.5em;
    background: #333;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    display: inline-block;
}
.close:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width:0.3em;
    height:1.5em;
    background: #333;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

<div class="gt"></div>
<div class="lt"></div>
<div class="close"></div>

实现原理：设置元素的边框线和旋转元素。