Table top design

by Adam Granger

HTML

<div class="box box-north">North</div>
<div class="box box-south">South</div>
<div class="box box-west">West</div>
<div class="box box-east">East</div>

CSS

.box {
    position: absolute;
    width: 300px;
    height: 50px;
    border: 1px solid red;
}
.box-north {
    transform: rotate(180deg);
}
.box-south {
    transform: rotate(0deg);
}
.box-west {
    transform: rotate(270deg);
}
.box-east {
    transform: rotate(90deg);
}
body {
    overflow: hidden;
}

JavaScript

var width = $(window).width();
var height = $(window).height();
var inset = 15;
var boxWidth = $(".box-west").width();
var boxHeight = $(".box-west").height();


var update = function () {
    $(".box-west").css({
        top: height / 2 - boxHeight / 2,
        left: inset - boxWidth / 2 + boxHeight / 2
    });
    $(".box-east").css({
        top: height / 2 - boxHeight / 2,
        left: width - boxWidth / 2 - boxHeight / 2 - inset
    });
    $(".box-north").css({
        top: inset,
        left: width / 2 - boxWidth / 2
    });
    $(".box-south").css({
        top: height - boxHeight - inset,
        left: width / 2 - boxWidth / 2
    });
};

$(window).resize(update);

update();