CodePen

HTML

            
              <ul>
  <li></li>
  <li></li>
</ul>
            
          
!

CSS

            
              * { box-sizing: border-box; }

html { height:100%; }

body { 
 	background:#c6c6c6;
}

ul {
 	width:200px;
  height:200px; 
  margin:40px auto;
  position:relative;
  background:#f1edec;
  border-radius:35px;
  box-shadow:
    inset 0 1px 1px white,
    inset 0 -5px 3px #dddcdb,
    0 0 10px rgba(0,0,0,0.2);
}
 
ul:after {
 	content:""; 
  width:80%;
  left:10%;
  position:absolute;
  bottom:6px;
  z-index:-1;
  height:5px;
  border-radius:50%;
  box-shadow:0 10px 10px rgba(0,0,0,0.2);
}

li {
 	position:absolute; 
  width:100px;
  height:75px;
  border-radius:50%;
  background:#ECECEC;
  box-shadow:
    inset 0 5px 0 rgba(255,255,255,0.3),
    inset 0 -5px 0 rgba(180,180,180,0.1),
    0 0 10px rgba(0,0,0,0.1),
    0 3px 3px rgba(0,0,0,0.2);
  border:1px solid rgba(0,0,0,0.1);
}

li:after {
 	content:"";
  width:10px;
  height:10px;
  transform:skewY(35deg);
  border:1px solid rgba(0,0,0,0.1);
  border-top:none; border-left:none;
  display:block;
  position:absolute;
  bottom:-5px;
  background:#e9e9e9;
  left:60%;
  box-shadow: 0 4px 2px rgba(0,0,0,0.2);
}

li:nth-child(1):after {
  transform:skewY(-35deg);
  left:30%;
  border:1px solid rgba(0,0,0,0.1);
  border-top:none; border-right:none;
}

li:nth-child(1) {
 	left:20px;
  top:45px;
}

li:nth-child(2) {
 	left:80px;
  top:65px;
  background:#EFEFEF;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................