The Square That Isn't There

A square that's not actually there. On new WebKit browsers, the square will spin!

by minitech

HTML

<div>
    <div class="square-edge"></div>
    
    <div class="square-edge"></div>
    
    <div class="square-edge"></div>
    
    <div class="square-edge"></div>
</div>

CSS

.square-edge {
    border: 15px solid red;
    border-bottom: 15px solid transparent;
    border-radius: 40px;
    
    display: inline-block;
    
    position: absolute;
}

.square-edge:first-of-type {
    top: 0;
    left: 49px;
}

.square-edge:nth-of-type(2) {
    top: 50px;
    left: 0;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.square-edge:nth-of-type(3) {
    top: 50px;
    left: 100px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
}

.square-edge:last-of-type {
    top: 100px;
    left: 51px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

body > div {
    height: 130px;
    position: relative;
    width: 130px;
    
    -webkit-transform-origin: 50% 50%;
    
    -webkit-animation-name: spin;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: linear;
}