<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.