Hamburger and Close icon
Description:
Kind:
CSS, HTML
CSS:
.menu.icon {
color: #000;
position: absolute;
margin-left: 2px;
margin-top: 10px;
width: 17px;
height: 4px;
background-color: currentColor;
}
.menu.icon:before {
content: '';
position: absolute;
top: -6px;
left: 0;
width: 17px;
height: 4px;
background-color: currentColor;
}
.menu.icon:after {
content: '';
position: absolute;
top: 6px;
left: 0;
width: 17px;
height: 4px;
background-color: currentColor;
}
.close.icon {
color: #000;
position: absolute;
margin-top: 0;
margin-left: 0;
width: 21px;
height: 21px;
}
.close.icon:before {
content: '';
position: absolute;
top: 10px;
width: 21px;
height: 1px;
background-color: currentColor;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.close.icon:after {
content: '';
position: absolute;
top: 10px;
width: 21px;
height: 1px;
background-color: currentColor;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
HTML:
<div class="menu icon"></div>