Magento

Logo recreated using pure HTML and CSS3. No images. No JS.

HTML

<div id="magento"> <div class="magento1"></div> <div class="magento2"></div> <div class="magento3"></div> <div class="magento4"></div> <div class="magento5"></div> <div class="magento6"></div> <div class="magento7"></div> <div class="magento8"></div> <div class="magento9"></div> <div class="magento10"></div> </div>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200

CSS

#magento { height: 210px; position: relative; width: 178px; } #magento * { position: absolute; } .magento1 { background: #f6844e; height: 104px; position: absolute; top: 26px; transform: skewy(-30deg); width: 89px; } .magento2 { background: #f6844e; height: 104px; left: 89px; position: absolute; top: 26px; transform: skewy(30deg); width: 89px; } .magento3 { background: #f15c22; height: 104px; position: absolute; top: 78px; transform: skewy(30deg); width: 89px; } .magento4 { background: #f15c22; height: 104px; left: 89px; position: absolute; top: 78px; transform: skewy(-30deg); width: 89px; } .magento5, .magento6, .magento7, .magento8, .magento9, .magento10 { background: #fff; } .magento5 { height: 105px; left: 22px; position: absolute; top: 72px; transform: skewy(30deg); width: 24px; } .magento6 { height: 105px; left: 133px; position: absolute; top: 72px; transform: skewy(-30deg); width: 24px; } .magento7 { height: 144px; left: 77px; position: absolute; top: 41px; transform: skewy(30deg); width: 12px; } .magento8 { height: 144px; left: 89px; position: absolute; top: 41px; transform: skewy(-30deg); width: 12px; } .magento9 { height: 78px; left: 44px; position: absolute; top: 20px; transform: rotate(60deg) skewy(30deg); width: 24px; } .magento10 { height: 78px; left: 111px; position: absolute; top: 20px; transform: rotate(-60deg) skewy(-30deg); width: 24px; }
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200