гамбургер

by Евгений

HTML

<h3><a href="http://unicode.johnholtripley.co.uk/" target="_blank">http://unicode.johnholtripley.co.uk/</a></h3>
    
<span>shadow-icon</span>
<div class="icon shadow-icon"></div>

<span>gradient-icon</span>
<div class="icon gradient-icon"></div>

<span>html-icon</span>
<div class="icon html-icon">&#9776;</div>

<span>u2630-icon</span>
<div class="icon u2630-icon"></div>

<span>u2261-icon</span>
<div class="icon u2261-icon"></div>

CSS

.icon {
    display: inline-block;
    vertical-align: middle;
    margin: 0 30px 0 10px;
    width: 30px;
    height: 30px;
    font-size: 30px;
    line-height: 30px;
    font-weight: bold;
}
span {
    vertical-align: middle;
}

.shadow-icon {
  position: relative;
}
.shadow-icon:after {
  content: "";
  position: absolute;
  left: 0;
  top: -100%;
  height: 100%;
  width: 100%;
  box-shadow: 0 6px 0 #000, 0 12px 0 #fff, 0 18px 0 #000, 0 24px 0 #fff, 0 30px 0 #000;
}

.gradient-icon {
    background: linear-gradient(to bottom, #000 0%, #000 20%, transparent 20%, transparent 40%, #000 40%, #000 60%, transparent 60%, transparent 80%, #000 80%, #000 100%);
}

.html-icon {
    font-size: 30px;
}

.u2630-icon:after {
    display: block;
    content: '\2630';
    font-size: 30px;
}
.u2261-icon:after {
    display: block;
    content: '\2630';
    font-size: 30px;
}