Isotropolis

by Kriem

HTML

<div class="block">
    <div class="top"></div>
    <div class="west"></div>
    <div class="north"></div>
    <div class="east"></div>
    <div class="south"></div>
</div>

CSS

div
{
    position:absolute;
}
.block
{
    top:50px;
    left:50px;
    width:80px;
    height:40px;
    background:#ececec;
    //-webkit-transform: scale(1, .5) rotate(30deg);
}
.block>div
{
    -webkit-transition: all 0.3s ease-out;
}
.block .west,
.block .east
{
    background:#fc0;
    width:40px;
    height:40px;
}
.block .north,
.block .south
{
    background:#fc0;
    background:#0c0;
    width:80px;
    height:40px;
}
.block .south
{
    top:40px;
    z-index:1;
}
.block .top
{
    top:-40px;
    background:#fc0;
    width:inherit;
    height:inherit;
}