Stackoverflow

How to draw a box of variable height using layered images

HTML

<div class="container"></div>

CSS

div.container {
    background-color: #adf;
    height: 400px;
    width: 400px;
}
div.container * {
    position: absolute;
}

JavaScript

/**
 * @tag stackoverflow
 */
(function() {
    var sBlockImageRef = "https://i.stack.imgur.com/7qacS.png";
    var BOX_HEIGHT = 10,
        BOX_WIDTH = 100;
    var container = $("div.container");
    function drawBox(iHeight, iLeft, iTop) {
        for (var ix=iHeight; ix>0; ix--) {
            var el = $(document.createElement("img"));
            el.attr("src", sBlockImageRef);
            el.css("left", iLeft);
            el.css("top", iTop+(BOX_HEIGHT*ix));
            container.append(el);
        }
    }
    drawBox(6, 50, 200);
    drawBox(4, 100+BOX_WIDTH, 200);
})();