Pure CSS3 Ice Cream

Demo

You have to eat this ice cream before it gets "HOT"!

CSS

#wrap22 {
  width:200px;
  margin:0px auto 0px;
  position:relative;
  text-align:center;
  -webkit-transform:rotate(-30deg);
  -moz-transform:rotate(-30deg);
  -ms-transform:rotate(-30deg);
  -o-transform:rotate(-30deg);
  transform:rotate(-30deg);
}

#wrap22 .ice {
  height:300px;
  background-color:#FAA0AF;
  background-image:-webkit-radial-gradient(top, cover, #FAA0AF, #FFCBD3);
  background-image:-moz-radial-gradient(top, cover, #FAA0AF, #FFCBD3);
  background-image:-ms-radial-gradient(top, cover, #FAA0AF, #FFCBD3);
  background-image:-o-radial-gradient(top, cover, #FAA0AF, #FFCBD3);
  background-image:radial-gradient(top, cover, #FAA0AF, #FFCBD3);
  -webkit-box-shadow:inset 0px 0px 10px #fff, 0px 4px 10px rgba(0,0,0,0.2);
 -moz-box-shadow:inset 0px 0px 10px #fff, 0px 4px 10px rgba(0,0,0,0.2);
  box-shadow:inset 0px 0px 10px #fff, 0px 4px 10px rgba(0,0,0,0.2);
  -webkit-border-radius:100px 100px 10px 10px;
  -moz-border-radius:100px 100px 10px 10px;
  border-radius:100px 100px 10px 10px;
  position:relative;
}

#wrap22 .ice:after {
  content:"";
  position:absolute;
  bottom:0px;
  left:0px;
  width:100%;
  height:30px;
  background-color:#FAA0AF;
  background-image:-webkit-linear-gradient(top, #FF8B9D, #FAA0AF);
  background-image:-moz-linear-gradient(top, #FF8B9D, #FAA0AF);
  background-image:-ms-linear-gradient(top, #FF8B9D, #FAA0AF);
  background-image:-o-linear-gradient(top, #FF8B9D, #FAA0AF);
  background-image:linear-gradient(top, #FF8B9D, #FAA0AF);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  -webkit-box-shadow:inset 0px 0px 10px #fff, 0px -1px 70px #fff;
  -moz-box-shadow:inset 0px 0px 10px #fff, 0px -1px 70px #fff;
  box-shadow:inset 0px 0px 10px #fff, 0px -1px 70px #fff;
}

#wrap22 .stick {
  width:30px;
  height:130px;
  background-color:#FFEAC4;
  background-image:-webkit-linear-gradient(-45deg, #FFEAC4, #FFF5DB);
  background-image:-moz-linear-gradient(-45deg, #FFEAC4, #FFF5DB);
  background-image:-ms-linear-gradient(-45deg, #FFEAC4, #FFF5DB);
  background-image:-o-linear-gradient(-45deg, #FFEAC4, #FFF5DB);
  background-image:linear-gradient(-45deg, #FFEAC4, #FFF5DB);
  -webkit-box-shadow:inset 0px -1px 0px #fff, 0px 3px 0px #EDCE95, 0px 7px 10px rgba(0,0,0,0.2);
  -moz-box-shadow:inset 0px -1px 0px #fff, 0px 3px 0px #EDCE95, 0px 7px 10px rgba(0,0,0,0.2);
  box-shadow:inset 0px -1px 0px #fff, 0px 3px 0px #EDCE95, 0px 7px 10px rgba(0,0,0,0.2);
  margin:-15px auto 0px;
  -webkit-border-radius:3px 3px 15px 15px;
  -moz-border-radius:3px 3px 15px 15px;
  border-radius:3px 3px 15px 15px;
  position:relative;
  z-index:10;
}

HTML

<div id='wrap22'>
    <div class='ice'></div>
    <div class='stick'></div>
</div>