Pepsi

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

HTML

<div id="pepsi"> <div class="red1"></div> <div class="red2"></div> <div class="red3"></div> <div class="blue1"></div> <div class="blue2"></div> <div class="blue3"></div> <div class="white1"></div> <div class="white2"></div> <div class="drop1 drop"></div> <div class="drop2 drop"></div> <div class="drop3 drop"></div> <div class="drop4 drop"></div> <div class="drop5 drop"></div> <div class="drop6 drop"></div> </div>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200

CSS

#pepsi { background: #fff; border-radius: 50%; height: 220px; position: relative; width: 220px; } #pepsi * { position: absolute; } #pepsi .red1, #pepsi .red2, #pepsi .red3 { background: #ee3a43; } #pepsi .red1 { border-radius: 200px 0 0 0; clip: rect(0px 200px 79px 0); height: 100px; left: 10px; top: 10px; width: 100px; } #pepsi .red2 { border-radius: 0 200px 0 0; clip: rect(0px 200px 92px 0); height: 100px; left: 110px; top: 10px; width: 100px; } #pepsi .red3 { border-radius: 161px/117px; clip: rect(103px 140px 117px 30px); height: 117px; left: -17px; top: -15px; width: 161px; } #pepsi .blue1, #pepsi .blue2, #pepsi .blue3 { background: #016aab; } #pepsi .blue1 { border-radius: 0 0 0 200px; bottom: 10px; clip: rect(8px 200px 100px 0); height: 100px; left: 10px; width: 100px; } #pepsi .blue2 { border-radius: 0 0 200px 0; bottom: 10px; clip: rect(22px 200px 100px 0); height: 100px; left: 110px; width: 100px; } #pepsi .blue3 { border-radius: 161px/117px; clip: rect(0 132px 15px 29px); height: 117px; left: 75px; top: 118px; width: 161px; } #pepsi .white1 { background: #ffffff; border-radius: 161px/117px; clip: rect(0 136px 22px 0); height: 117px; left: 75px; position: absolute; top: 81px; width: 161px; } #pepsi .white2 { background: #ffffff; border-radius: 161px/117px; clip: rect(95px 136px 117px 0); height: 117px; left: -17px; position: absolute; top: 22px; width: 161px; } #pepsi .drop { border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 26px/30px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); height: 30px; opacity: 0.6; width: 26px; } #pepsi .drop:before { background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%); border-radius: 20px; content: ""; height: 20px; left: 4px; position: absolute; top: 2px; width: 18px; } #pepsi .drop:after { border-radius: 26px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%); box-shadow: 0 2px 0 #fff; content: ""; height: 24px; left: 1px; position: absolute; top: 3px; width: 24px; } #pepsi .drop1 { left: 80px; top: 80px; } #pepsi .drop2 { left: 33px; top: 50px; transform: scale(0.6); } #pepsi .drop3 { left: 150px; top: 136px; transform: scale(0.7); } #pepsi .drop4 { left: 145px; top: 169px; } #pepsi .drop5 { left: 130px; top: 26px; transform: scale(0.9); } #pepsi .drop6 { left: 50px; top: 138px; transform: scale(0.7); }
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200