Nike

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

HTML

<div id="nike"> <div class="icon"> <div class="nike1"></div> <div class="nike2"></div> <div class="nike3"></div> <div class="nike4"></div> <div class="nike5"></div> </div> </div>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200

CSS

#nike { background-color: #ef3e1d; height: 132px; overflow: hidden; position: relative; width: 360px; } #nike * { position: absolute; } #nike .icon { left: -40px; top: 8px; transform: rotate(-23deg); } .nike1, .nike2, .nike3, .nike4, .nike5 {} .nike3, .nike5 { background: #ef3e1d; } .nike1, .nike2 { background: #fff; } .nike1 { border-radius: 101px/230px; height: 230px; left: 57px; top: -40px; transform: rotate(67deg); width: 101px; z-index: 11; } .nike2 { border-radius: 101px/207px; height: 207px; left: 53px; top: 1px; transform: rotate(84deg); width: 101px; z-index: 12; } .nike3 { height: 80px; left: 91px; top: 65px; width: 124px; z-index: 13; } .nike4 { border-top: 39px solid transparent; border-right: 0 none; border-bottom: 5px solid transparent; border-left: 276px solid #fff; left: 90px; top: 112px; z-index: 14; } .nike5 { border-radius: 97px/175px; height: 175px; left: 88px; top: -31px; transform: rotate(67deg); width: 97px; z-index: 15; }
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200