1.CSS图像绘制之：关闭按钮

一、HTML

<span class="close">Close Me</span>

二、CSS

/*使页面背景显示为绿色*/

body {

   background:#2ECC71;    margin:50px;

}

.close{

   font-size:0px;

   display:block;

}
/*绘制上下2个白色长方形*/

.close::before, .close::after{

   content:'';

   width:50px;

   height:2px;

   background:#FFF;

   display:block;

}



/*上个长方形顺时针旋转45°*/

.close::before{

   transform: rotate(45deg);

}



/*下个长方形逆时针旋转45°*/

.close::after{

   transform:translateY(-2px) rotate(-45deg);

}