body { background-color: #2b968c; }
#bun {
position: relative;
top: 0px;
margin: 0 auto;
width: 500px;
overflow: hidden;
}
#top {
position: relative;
z-index: 9;
height: 190px;
-moz-border-radius: 107px 107px 45px 45px / 119px 119px 75px 75px;
-webkit-border-radius: 107px 107px 45px 45px / 119px 119px 75px 75px;
border-radius: 107px 107px 45px 45px / 119px 119px 75px 75px;
-moz-box-shadow: 0 5px 10px rgba(102,76,0,.3);
-webkit-box-shadow: 0 5px 10px rgba(102,76,0,.3);
box-shadow: 0 5px 10px rgba(102,76,0,.3);
background-color: #ffbe00;
}
#seasame {
position: absolute;
top: 20px;
left: 30px;
height: 130px;
width: 375px;
border: 10px solid #ffe391;
border-width: 10px 0 0 10px;
-moz-border-radius: 75px;
-webkit-border-radius: 75px;
border-radius: 75px;
}
.tomato {
float: left;
position: relative;
z-index: 8;
margin: -7px 0 0 30px;
height: 30px;
width: 212px;
border: solid 25px #ee4036;
border-width: 0 5px 25px;
-moz-border-radius: 0 0 43px 43px / 0 0 50px 50px;
-webkit-border-radius: 0 0 43px 43px / 0 0 50px 50px;
border-radius: 0 0 43px 43px / 0 0 50px 50px;
background-color: #b33029;
}
.tomato:nth-child(3) { margin-left: -2px; }
#lettuce {
position: relative;
z-index: 7;
clear: left;
top: -45px;
margin: 0 auto;
height: 55px;
width: 490px;
border: solid 35px #b1d918;
border-width: 0 2px 35px;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
background-color: #85a312;
}
.leaf {
position: relative;
z-index: 6;
float: left;
top: -100px;
left: 75px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
height: 100px;
width: 100px;
background-color: #b1d918;
}
.big {
top: -105px;
left: 120px;
width: 215px;
}
#meat {
position: relative;
z-index: 5;
clear: left;
top: -180px;
left: 3px;
height: 90px;
width: 494px;
border: solid 40px #9c3d00;
border-width: 0 2px 40px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-moz-box-shadow: 0 5px 10px rgba(117,46,0,.2);
-webkit-box-shadow: 0 5px 10px rgba(117,46,0,.2);
box-shadow: 0 5px 10px rgba(117,46,0,.2);
background-color: #752e00;
}
#bottom {
position: relative;
z-index: 4;
top: -250px;
height: 100px;
border: solid 40px #ffbe00;
border-width: 0 2px 40px;
-moz-border-radius: 110px;
-webkit-border-radius: 110px;
border-radius: 110px;
background-color: #ff8e00;
}
#shadow {
position: relative;
z-index: 3;
top: -262px;
margin: 0 auto;
height: 30px;
width: 520px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
background-color: #207169;
}
#table { text-indent: -9999em; }
<p>Mmmmm... tasty burger!</p>
<div id="table">-cloth, it's a picnic.
<div id="top">
<div id="seasame"></div>
<div id="seasame">toasted</div>
<div class="tomato"></div>
<div class="tomato">fresh</div>
<div class="tomato">juicy</div>
<div id="lettuce">crisp</div>
<div class="leaf big"></div>
<div id="meat"></div>
<div id="meat">medium</div>
<div id="bottom">toasted</div>
<div id="shadow"></div>
</div>