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