Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta name="description" content="banana" />
</head>
<body>
    <div class="banana"></div>
    <div class="banana peeled"></div>
    <div class="banana peel"></div>
</body>
</html>
 
body { background: #999; }
.banana,
.banana::before,
.banana::after { 
    border-radius: 50%; 
    display: block; 
    position: absolute; 
    box-sizing: border-box;
}
.banana::before,
.banana::after { 
    content: '';
}
.banana { 
    top: 10em; 
    left: 20em; 
    background: transparent;    
    border-bottom: 3em solid rgba(237,192,67,0.5);  
    height: 12em;   
    width: 28em;    
    transform: rotate(5deg);    
    transform-style: preserve-3d;
} /* shadow */
.banana::before {   
    top: 4.2em; 
    left: -1.8em;   
    background: padding-box linear-gradient(to left, #eddd7c 20%, #d7d666 80%); 
    border-left: 0.5em solid transparent;   
    height: 1.75em; 
    width: 3em; 
    border-radius: 50%/30%; 
    transform: rotate(40deg) translateZ(-1em); 
} /* stalk */
.banana::after {    
    background: padding-box linear-gradient(to right, #eddd7c 20%, #f9cf44 40%, #e09d26 140%);  
    border-top: 5em solid rgba(0,0,0,0);    
    height: 12em; 
    width: 28em;    
    transform: translateZ(-1em);
} /* main body */
/* peeled banana */
.banana.peeled { 
    top: 28em; 
    left: 5em; 
    transform: rotate(90deg); 
    height: 11em; 
    width: 28em;
    background: padding-box linear-gradient(to right, #fff -60%, #eddd7c 53%, #edc043 53%, #edc043 65%, #e09d26 115%);
    border: none;
    border-top: 5em solid rgba(0,0,0,0);    
} /* main body */
.banana.peeled::before,
.banana.peeled::after {
    border-radius: 50%; 
    border: 0.5em solid transparent;
    background: none; 
    box-shadow: 0 -5em 0 -1em #edc043; 
}
.banana.peeled::before { 
    height: 13em;
    width: 13em; 
    transform: rotate(-60deg); 
    top: 4em; 
    left: 15em;
} /* peel */
.banana.peeled::after {
    height: 14em;       
    width: 14em; 
    transform: rotate(-130deg); 
    top: -10.5em; 
    left: 14em;
} /* peel */
/* banana peel */
.banana.peel {
    height: 18em;
    width: 19em;
    top: 20em;
    left: 22em;
    box-shadow: 0 5.5em 0 -1em #f9cf44, -0.5em 6.5em 0 -1.4em #eddd7c;
    border: none;
    transform: rotate(-30deg);
    transform-style: preserve-3d;
}
.banana.peel::after {
    height: 17em;
    width: 14em; 
    left: 18em;
    top: 9.5em;
    background: none;
    border-radius: 50% 45%;
    box-shadow: 0 5.5em 0 -1em #edc043; 
    transform: rotate(65deg) translateZ(-1em);
}
.banana.peel::before { display: none; }
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
lunamaticpro
0viewers