<div id="pepsi-logo">
  <div id="blue"></div>
    <div id="white"></div>
    <div id="red"></div>
    <div id="outside"></div>
</div>
#pepsi-logo {
    height:400px;
    margin:0 auto;
    overflow:hidden;
    position:relative;
    width:400px;
  margin-top:30px;
}

#pepsi-logo div {
    position:absolute;
}

#red {
  border-radius:500px / 300px;
  -moz-border-radius:500px / 300px;
  -webkit-border-radius:500px 300px;
  background:#ed262b;
  height:400px;
  width:480px;
  top:-110px;
  left:-190px;
  -webkit-transform:rotate(-40deg); 
  -moz-transform:rotate(-40deg);
  -o-transform:rotate(-40deg);
  -ms-transform:rotate(-40deg);
}

#blue {
  border-radius:200px;
  -moz-border-radius:200px;
  -webkit-border-radius:200px;
  background:#2c5492;
  height:400px;
  width:400px;
}

#white {
    background:#fff;
    border-radius:150px;
  -moz-border-radius:150px;
  -webkit-border-radius:150px;
    height:300px;
    width:490px;
  left:-120px;
  -webkit-transform:rotate(-15deg); 
  -moz-transform:rotate(-15deg);
  -o-transform:rotate(-15deg); 
  -ms-transform:rotate(-15deg); 
}

#outside {
  height:400px;
  width:400px;
  border-radius:285px;
  -moz-border-radius:285px;
  -webkit-border-radius:285px;
  left:-85px;
  top:-85px;
  border:85px solid #fff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.