SOURCE

<span class="menu"></span>
<span class="close"></span>

.menu,.close{
	height: 2px;
	width: 24px;
	background: #000;
	display: block;
	position: relative;
}
.menu:before,.menu:after{
	content: '';
	position: absolute;
	left: 0;
	height: 2px;
	width: 24px;
	background: #000;
	display: block;
}
.menu:before{
	bottom: -10px;
}
.menu:after{
	bottom: -20px;
}
.close{
	top:40px;
	transform: rotate(90deg);
	-ms-transform:rotate(45deg); 	/* IE 9 */
	-moz-transform:rotate(45deg); 	/* Firefox */
	-webkit-transform:rotate(45deg); /* Safari 和 Chrome */
	-o-transform:rotate(45deg); 	/* Opera */
}
.close:before{
	content: '';
	position: static;
	bottom: -10px;
	left: 0;
	height: 2px;
	width: 24px;
	background: #000;
	display: block;
	transform: rotate(90deg);
	-ms-transform:rotate(90deg); 	/* IE 9 */
	-moz-transform:rotate(90deg); 	/* Firefox */
	-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
	-o-transform:rotate(90deg); 	/* Opera */
}