McDonald's

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

HTML

<div id="mcdonalds">
  <div class="left">
    <div class="arch1 arch"></div>
    <div class="arch2 arch"></div>
    <div class="glow">
      <div class="arch1 arch"></div>
      <div class="arch2 arch"></div>
    </div>
    <div class="inner">
      <div class="arch1 arch"></div>
      <div class="arch2 arch"></div>
    </div>
    <div class="hole">
      <div class="arch1 arch"></div>
      <div class="arch2 arch"></div>
    </div>
    <div class="triangle1 triangle"></div>
    <div class="triangle2 triangle"></div>
  </div>
  <div class="right">
    <div class="arch1 arch"></div>
    <div class="arch2 arch"></div>
    <div class="glow">
      <div class="arch1 arch"></div>
      <div class="arch2 arch"></div>
    </div>
    <div class="inner">
      <div class="arch1 arch"></div>
      <div class="arch2 arch"></div>
    </div>
    <div class="triangle1 triangle"></div>
    <div class="hole">
      <div class="arch1 arch"></div>
      <div class="arch2 arch"></div>
    </div>
  </div>
  <div class="border1"></div>
  <div class="border2"></div>
</div>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200

CSS

#mcdonalds {
  background-color: #c00;
  position: relative;
  height: 200px;
  overflow: hidden;
  width: 238px;
}

#mcdonalds * {
  position: absolute;
}

#mcdonalds .left,
#mcdonalds .right,
#mcdonalds .border1,
#mcdonalds .border2 {
  margin-left: -130px;
}

#mcdonalds .arch {
  background: #ffc20f;
  border-radius: 139px/410px;
  clip: rect(0 75px 201px 0);
  height: 410px;
  position: absolute;
  transform: skewx(-1deg);
  width: 139px;
}

#mcdonalds .arch1 {
  left: 130px;
}

#mcdonalds .arch2 {
  left: 135px;
  transform: skewx(0deg) scalex(-0.9);
}

#mcdonalds .glow {
  clip: rect(0px 267px 189px 130px);
  left: 29px;
  position: absolute;
  top: 16px;
  transform: scalex(0.83) scaley(0.95);
}

#mcdonalds .glow .arch {
  background-image: linear-gradient(0deg, rgb(247, 245, 103) 70%, rgb(255, 195, 15) 100%);
}

#mcdonalds .inner {
  clip: rect(0 280px 222px 130px);
  left: 61px;
  position: absolute;
  top: 23px;
  transform: scalex(0.66);
}

#mcdonalds .inner .arch2 {
  left: 142px;
}

#mcdonalds .hole {
  clip: rect(0 270px 230px 130px);
  left: 61px;
  position: absolute;
  top: 23px;
  transform: scalex(0.66);
}

#mcdonalds .hole .arch {
  background: #c00;
}

#mcdonalds .hole .arch1 {
  clip: rect(5px 57px 201px 0);
  left: 158px;
  transform: skewx(0deg);
}

#mcdonalds .hole .arch2 {
  clip: rect(0 55px 201px 0);
  left: 124px;
  transform: skewx(-2deg) scalex(-0.9);
}

#mcdonalds .triangle {
  border: 14px solid transparent;
  border-bottom-color: #ffc20f;
  position: absolute;
}

#mcdonalds .triangle1 {
  left: 135px;
  top: 168px;
}

#mcdonalds .triangle2 {
  left: 236px;
  top: 156px;
}

#mcdonalds .right {
  clip: rect(0 249px 250px 0px);
  left: 498px;
  position: absolute;
  transform: scalex(-1);
}

#mcdonalds .right .glow {
  left: 40px;
}

#mcdonalds .right .inner {
  left: 71px;
}

#mcdonalds .right .inner .arch2 {
  left: 141px;
  transform: skewx(0deg) scalex(-0.9) rotate(1deg);
}

#mcdonalds .border1 {
  background: #ffc20f;
  height: 15px;
  left: 230px;
  position: absolute;
  top: 180px;
  width: 38px;
}

#mcdonalds .border2 {
  background: #c00;
  height: 15px;
  left: 229px;
  position: absolute;
  top: 189px;
  width: 40px;
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200