<div class="icecream">
  <div class="ice">
    <div class="cream">
      <div class="reflection"></div>
    </div>
  </div>
  <div class="stick"></div>
  
</div>
* {
  margin: 0;
}

body {
  background: radial-gradient(#48dbfb 25%,#0abde3);
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.ice {
  background: #ff9ff3;
  width: 15vw;
  height: 25vw;
  border-radius: 25vw 25vw 0 0;
  border: 1vw solid;
  position:relative;
  overflow:hidden;
}

.ice::before{
  content:'';
  width:5vw; height:6vw;
  background:#ff9ff3;
  position:absolute;
  z-index:2;
  border-radius:5vw 5vw 0 0;
  border:1vw solid;
  border-bottom:0;
  top:8vw;
  left:6vw;
}

.ice::after{
  content:'';
  background: rgba(0,0,0,.1);
  position:absolute;
  top:0;
  width:50%;
  height:25vw;
  z-index:2;
}

.cream{
  position:absolute;
  width:100%;
  height:14vw;
  background:#f368e0;
  border-radius: 25vw 25vw 0 0;
}

.cream::before{
  content:'';
  width:6vw; height:4vw;
  background:#f368e0;
  position:absolute;
  z-index:2;
  border-radius:0 0 5vw 5vw;
  border:1vw solid;
  border-top:0;
  top:14vw;
  left:-1vw;
}

.cream::after{
  content:'';
  width:2vw; height:7vw;
  background:#f368e0;
  position:absolute;
  z-index:2;
  border-radius:0 0 5vw 5vw;
  border:1vw solid;
  border-top:0;
  top:13vw;
  right:calc(-1vw - 0px);
}

.stick{
  width:3vw;
  height:10vw;
  border:1vw solid;
  border-top:0;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  border-radius:0 0 3vw 3vw;
  background:#ccae62;
  box-shadow:inset 0 1vw 1vw rgba(0,0,0,.4);
}

.stick::after{
  content:'';
  background: rgba(0,0,0,.1);
  position:absolute;
  top:0;
  width:50%;
  height:10vw;
  z-index:2;
}

.reflection{
  position:absolute;
  background:none;
  width:5vw;
  height:5vw;
  right:1vw; top:1vw;
  border-radius:0 8vw 0 0;
  border:1vw solid rgba(255,255,255,.3);
  border-bottom:none;
  border-left:none;
}

.reflection::after{
  content:'';
  position:absolute;
  bottom:-2vw;
  right:-1vw;
  background:rgba(255,255,255,.5);
  width:1vw;
  height:1vw;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.