<div id="batman-logo">
  <div id="yellow-oval"></div>
  <div id="bottom-left-yellow"></div>
  <div id="bottom-right-yellow"></div>
  <div id="top-yellow"></div>
  <div id="extras"></div>
</div>
#batman-logo {
    height:300px;
    margin:0 auto;
    overflow:hidden;
    position:relative;
    width:500px;
  background:#000;
  margin-top:20px;
}

#batman-logo div {
    position:absolute;
}

#yellow-oval {
  background:yellow;
  width:480px;
  height:270px;
  top:15px;
  left:10px;
  border-radius:250px / 140px;
  -moz-border-radius:250px / 140px;
  -webkit-border-radius:250px / 140px;
}

#yellow-oval:after {
  content:"";
  width:450px;
  height:240px;
  background:#000;
  position:absolute;
  top:15px;
  left:15px;
  border-radius:250px / 140px;
  -moz-border-radius:250px / 140px;
  -webkit-border-radius:250px / 140px;
}

#bottom-left-yellow {
  background:yellow;
  height:90px;
  width:80px;
  border-radius:40px 50px 30px 30px / 70px 70px 30px 30px;
  -moz-transform:rotate(-40deg);
  -webkit-transform:rotate(-40deg);
  -o-transform:rotate(-40deg);
  bottom:40px;
  left:86px;
}

#bottom-left-yellow:after {
  content:"";
  position:absolute;
  background:yellow;
  height:90px;
  width:100px;
  border-radius:50px 90px 30px 30px / 70px 100px 30px 30px;
  -moz-transform:rotate(50deg);
  -webkit-transform:rotate(50deg);
  -o-transform:rotate(50deg);
  top:60px;
  left:40px;
}

#bottom-right-yellow {
  background:yellow;
  height:90px;
  width:80px;
  border-radius:40px 50px 30px 30px / 70px 70px 30px 30px;
  -moz-transform:rotate(40deg);
  -webkit-transform:rotate(40deg);
  -o-transform:rotate(40deg);
  bottom:40px;
  right:86px;
}

#bottom-right-yellow:after {
  content:"";
  position:absolute;
  background:yellow;
  height:90px;
  width:100px;
  border-radius:90px 50px 30px 30px / 100px 70px 30px 30px;
  -moz-transform:rotate(-50deg);
  -webkit-transform:rotate(-50deg);
  -o-transform:rotate(-50deg);
  top:60px;
  right:40px;
}

#top-yellow {
  border-top:22px solid yellow; 
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  height:0;
  width:20px;
  left:228px;
  top:30px;
}

#top-yellow:before {
  content:"";
  position:absolute;
  width:80px;
  height:90px;
  border-radius:100px 60px 100px 90px / 100px 60px 100px 90px;
  background:yellow;
  top:-45px;
  right:34px;
  -moz-transform:rotate(10deg);
  -webkit-transform:rotate(10deg);
  -o-transform:rotate(10deg);
}

#top-yellow:after {
  content:"";
  position:absolute;
  width:80px;
  height:90px;
  border-radius:60px 100px 90px 100px; / 60px 100px 90px 100px;
  background:yellow;
  top:-45px;
  left:34px;
  -moz-transform:rotate(-10deg);
  -webkit-transform:rotate(-10deg);
  -o-transform:rotate(-10deg);
}

#extras {
  width:212px;
  height:25px;
  background:yellow;
  bottom:30px;
  left:144px;
}

#extras:after {
  content:"";
  position:absolute;
  background:transparent;
  width:480px;
  height:264px;
  top:-326px;
  left:-234px;
  border-radius:350px / 250px;
  border:100px solid #000;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.