A CodePen by Johanna Ruiz. Gift Wrapped - I wanted to create a wrapped present out of HTML and CSS. Using a few empty divs, combined with :before and :after pseudo-elements, this was easily created. The most difficult part has been getting a ribbon to look correct. This is a first attempt, and will be revisiting to attain the desired effect.

index.html

<div id="gift-container">
  <div id="gift-box-top" class="emerald-green">
    <div id="ribbon">
      <div id="ribbon-tail"></div>
    </div>
  </div>
  <div id="gift-box" class="emerald-green"></div>
</div>

style.css

body{ background:#f2f2f2;}
.canary-yellow  { background:#faff45; }
.emerald-green  { background:#3BBC46; }
.mango-red  { background:#ff2d21; }
.dark-mago-red{background:#A6120B;}
#gift-container{
  margin:120px auto;
  width:200px;
}
#gift-box-top{
  content:"";
  width:206px;
  height:60px;
  box-shadow:0px 0px 3px -1px #000;
  position:relative;
  z-index:1;
  left:-3px;
}
#gift-box-top:before, #gift-box-top:after, #gift-box:before, #gift-box:after{
  content:" ";
  position:absolute;
}
#gift-box-top:before{
  width:60px;
  height:60px;
  background:#ff2d21;
  left:35%;
  border-right:3px solid #a6120b;
  border-left:3px solid #a6120b;
}
#gift-box{
  content:" ";
  width:200px;
  height:200px;
  box-shadow:0px 0px 5px -1px #000;
  position:relative;
  top:-50px;
}
#gift-box:before{
  width:60px;
  left:34.5%;
  background:#ff2d21;
  height:100%;
  border-right:3px solid #a6120b;
  border-left:3px solid #a6120b;
}

#ribbon { 
  position: relative;
  width: 180px;
  height: 100px;
  top:-118px;
  left:14px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  z-index:1;
  background:transparent;
}
#ribbon:before, #ribbon:after { 
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 60px;
  height: 60px;
  border: 10px solid #ff2d21;
  -moz-border-radius: 50px 50px 0 50px;
  border-radius: 50px 50px 0 50px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -moz-box-shadow:0px 0px 5px -1px #A6120B inset, 0 0 2px -1px #A6120B;
  -webkit-box-shadow:0px 0px 5px -1px #A6120B inset, 0 0 2px -1px #A6120B; 
  box-shadow:0px 0px 5px -1px #A6120B inset, 0 0 2px -1px #A6120B;
  background:transparent;
}
#ribbon:after { 
  left: auto;
  right:41px;
  top:58px;
  -moz-border-radius: 50px 50px 50px 0;
  border-radius: 50px 50px 50px 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  position:absolute;
  z-index:1;
}
#ribbon-tail{
 content:" ";
 width:30px;
 height:80px;
 position:relative;
}
#ribbon-tail:before, #ribbon-tail:after{
  content:" ";
  width:30px;
  height:80px;
  position:absolute;
  background:#ff2d21;
}
#ribbon-tail:before{
  top:108px;
  left:30px;
  -moz-transform: rotate(16deg) skewY(28deg);
  -webkit-transform: rotate(16deg) skewY(28deg);
  -ms-transform: rotate(16deg) skewY(28deg);
  -o-transform: rotate(16deg) skewY(28deg);
  transform: rotate(16deg) skewY(28deg);
  -moz-box-shadow:0px 0px 2px -1px #A6120B, 0px 0px 2px 0px #A6120B inset;
  -webkit-box-shadow:0px 0px 2px -1px #A6120B, 0px 0px 2px 0px #A6120B inset;
  box-shadow:0px 0px 2px -1px #A6120B, 0px 0px 2px 0px #A6120B inset;
}
#ribbon-tail:after{
  top:58px;
  left:-22px;
  -moz-transform: rotate(254deg) skewY(-28deg);
  -webkit-transform: rotate(254deg) skewY(-28deg);
  -ms-transform: rotate(254deg) skewY(-28deg);
  -o-transform: rotate(254deg) skewY(-28deg);
  transform: rotate(254deg) skewY(-28deg);
  -moz-box-shadow:0px 0px 2px -1px #A6120B, 0px 0px 2px 0px #A6120B inset;
  -webkit-box-shadow:0px 0px 2px -1px #A6120B, 0px 0px 2px 0px #A6120B inset;
  box-shadow:0px 0px 2px -1px #A6120B, 0px 0px 2px 0px #A6120B inset;
}