HTML
<div id="wrapper">
<div id="bulb">
<div id="bulb-top"></div>
<div id="bulb-middle"></div>
<div id="bulb-bottom"></div>
</div>
<div id="bulb-base">
<div id="bulb-base-top"></div>
<div id="bulb-base-middle">
<div class="rivet rivet-short"></div>
<div class="rivet rivet-long"></div>
<div class="rivet rivet-short"></div>
<div class="rivet rivet-long"></div>
<div class="rivet rivet-short"></div>
</div>
<div id="bulb-base-bottom"></div>
</div>
</div>
CSS
body {
overflow: hidden;
padding: 0;
}
#wrapper {
color: #FFCC02;
position: absolute;
left: calc(50% - 20vmin);
top: calc(50% - 26vmin);
height: 52vmin;
width: 40vmin;
}
#bulb {
position: relative;
width: inherit;
height: inherit;
-webkit-transition: color 400ms linear;
transition: color 400ms linear;
-webkit-filter: drop-shadow(0 0 20px currentColor);
filter: drop-shadow(0 0 20px currentColor);
z-index: 1;
}
#bulb-top {
border-radius: 50%;
background: -webkit-radial-gradient(20vmin 20vmin circle, #ffff00 0%, currentColor 40%, currentColor 80%, rgba(0, 0, 0, 0) 100%);
background: radial-gradient(circle at 20vmin 20vmin, #ffff00 0%, currentColor 40%, currentColor 80%, rgba(0, 0, 0, 0) 100%);
width: 40vmin;
height: 40vmin;
}
#bulb-middle {
border-top: 20vmin solid currentColor;
border-left: 10vmin solid transparent;
border-right: 10vmin solid transparent;
position: absolute;
height: 0;
bottom: 2px;
width: 12.12121vmin;
left: calc(50% - 40vmin/2.5);
}
#bulb-bottom {
background-color: currentColor;
border-radius: 50%;
position: absolute;
height: 13.33333vmin;
width: 20vmin;
left: calc(50% - 40vmin/4);
bottom: 0;
}
#bulb-base {
color: #999;
position: absolute;
height: 13.33333vmin;
width: 40vmin;
bottom: -10.81081vmin;
z-index: 2;
}
#bulb-base-top {
background: -webkit-linear-gradient(top, #bbb 20%, #555 100%);
background: linear-gradient(to bottom, #bbb 20%, #555 100%);
border-radius: 0 0 3px 3px;
position: relative;
height: 2.5vmin;
width: 16vmin;
left: calc(50% - 40vmin/5);
}
.rivet {
position: relative;
}
.rivet-short {
background-color: #666666;
border-top: 3px solid #333333;
height: 0.83333vmin;
width: 13.33333vmin;
left: calc(50% - 40vmin/6);
}
.rivet-long {
background: -webkit-linear-gradient(top, #aaa 20%, #555 100%);
background: linear-gradient(to bottom, #aaa 20%, #555 100%);
border-radius: 3px;
height: 1.25vmin;
width: 16vmin;
left: calc(50% - 40vmin/5);
}
#bulb-base-bottom {
border-top: 5vmin solid #999;
border-left: 5.71429vmin solid transparent;
border-right: 5.71429vmin solid transparent;
position: relative;
width: 5vmin;
left: calc(50% - 40vmin/5);
}
