A Single-div CSS3 Mondrian

The idea here is mainly that a single html element would be enough to represent all kinds of visual content. With enough box-shadows set on a 1x1px pseudo-element, one could theoretically paint out entire images, pixel by pixel.

This is all the HTML necessary:

<div id="p"></div>

And here’s the CSS:

#p {
    width: 400px;
    height: 450px;
    background: black;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 2em;
    position: relative;
    display: block;
    border: solid 11px black;
    box-sizing: border-box;
    overflow: hidden;
}

#p::after {
    content: "";
    width: 12.4%;
    height: 10%;
    background: white;
    position: absolute;
    top: 316px;
    right: 0;
    box-shadow: 0px 55px 0px #ffff00,
                0px 95px 0px #ffff00;
}

#p::before {
    content: "";
    width: 70.6%;
    height: 70.6%;
    background: #ff0000;
    position: absolute;
    top: 0;
    right: 0;
    box-shadow: -280px -205px 0px #ffffff,
                -279px -188px 0px #000000,
                -280px 0px 0px #ffffff,
                -280px 316px 0px #0000ff,
                208px 315px 0px #000000,
                0px 316px 0px #ffffff;
}

Of course, probably the best way to get a single-div mondrian representation is to set a background image of mondrian.jpg.