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>