Dropbox Logo - Pure CSS

HTML
<div class="dropbox-logo"> <div class="box-left"></div> <div class="box-right"></div> <div class="left-cover-hidden"></div> <div class="right-cover-hidden"></div> <div class="top-cover"></div> <div class="right-cover"></div> <div class="bottom-cover"></div> <div class="left-cover"></div> <div class="box-hidden"></div> </div>
CSS
/* ======================= Basic Stuff ======================= */ html, body { background-color: #2795ee; width:100%; height: 100%; margin: 0; overflow: hidden; /* Centering with Flex */ display: flex; justify-content: center; align-items: center; } /* ======================= Dropbox Logo ======================= */ .dropbox-logo { width: 300px; height: 300px; position: relative; overflow: hidden; border-radius: 150px; user-select: none; } .dropbox-logo div { position: absolute; background-color: #ffffff; } .dropbox-logo div[class*=-hidden] { background-color: #2795ee; } /* ======================= */ .dropbox-logo .box-left { transform: skew(0, 31deg); width: 62px; height: 79px; left: 90px; top: 153px; } .dropbox-logo .box-right { transform: skew(0, -31deg); width: 61px; height: 79px; left: 151px; top: 153px; } /* ======================= */ .dropbox-logo .left-cover-hidden { transform: skew(-50deg, 34deg); width: 62px; height: 40px; left: 70px; top: 152px; } .dropbox-logo .right-cover-hidden { transform: skew(50deg, -34deg); width: 62px; height: 40px; left: 170px; top: 152px; } /* ======================= */ .dropbox-logo .top-cover { transform: skew(51deg, -33deg); width: 60px; height: 37px; left: 71px; top: 79px; } .dropbox-logo .bottom-cover { transform: skew(51deg, -33deg); width: 60px; height: 37px; left: 171px; top: 148px; } .dropbox-logo .right-cover { transform: skew(-51deg, 33deg); width: 60px; height: 37px; left: 171px; top: 79px; } .dropbox-logo .left-cover { transform: skew(-51deg, 33deg); width: 60px; height: 37px; left: 71px; top: 148px; } /* ======================= */ .dropbox-logo .box-hidden { transform: skew(-58deg, 32deg); width: 60px; height: 38px; left: 121px; top: 113px; }
JAVASCRIPT
Expand for more options Login