<div class="box"></div>
body
  height: 100vh
  display: flex
  justify-content: center
  align-items: center
  background-color: #43414d
  box-sizing: border-box
  overflow: hidden
  
.box
  position: relative
  width: 215px
  height: 220px
  box-sizing: border-box
  border-top: 5px solid white
  border-bottom: 40px solid white
  
  // clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%)
  // box-shadow: inset 2px 2px 2px black
  // filter: drop-shadow(18px 18px 0 yellow)
  background: linear-gradient(86deg, white 0px, white 20px, transparent 20px), linear-gradient(94deg, transparent 40%, transparent 40%, rgba(white, .7) 80%, transparent), linear-gradient(94deg, transparent 0px, transparent 206px, white 206px, white 220px), linear-gradient(to bottom, rgba(white, .3) 50px, rgba(cyan, .5) 50px, darkcyan )
  &::after
    content: ""
    width: 100px
    height: 100px
    position: absolute
    background: linear-gradient(0deg, transparent 47%, #e0ecb9 47%, #e0ecb9 52%, transparent 52%), linear-gradient(45deg, transparent 48%, #e0ecb9 48%, #e0ecb9 52%, transparent 52%), linear-gradient(90deg, transparent 47%, #e0ecb9 47%, #e0ecb9 52%, transparent 52%), linear-gradient(135deg, transparent 48%, #e0ecb9 48%, #e0ecb9 52%, transparent 52%), linear-gradient(#9ed296 50%, #e0ecb9 100%)
    
    border-radius: 50%
    top: -55px
    left: -50px
    z-index: -1
    border: 6px solid #e0ecb9
    box-sizing: border-box
    box-shadow: 0px 0px 0px 5px #4b905c, 50px 120px 0 -45px white, 30px 110px 0 -40px white, 50px 100px 0 -47px white
  &::before
    content: ""
    width: 60px
    height: 50px
    background-color: white
    position: absolute
    border-radius: 10px
    top: 25%
    left: 30%
    box-shadow: inset 10px 0 0 lightgrey
    transform: rotateZ(-45deg)
    animation: icecube 20s ease infinite
    
      
    
    
    
  
    
  
@keyframes icecube
  0%, 100%
    width: 60px
    transform: rotateZ(-45deg) translateY(0)
    box-shadow: inset 10px 0 0 lightgrey
  25%
    width: 50px
  50%
    
    transform: rotateZ(0deg) translateY(-10px)
    box-shadow: inset -10px 0 0 white
    background-color: lightgrey
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.