#21-SitePoint-Logo.htm

<div a></div>
<div b></div>
<div c></div>
<div d></div>
<style>
    body {
        background: #222;
    }

    div {
        position: absolute
    }

    [a],
    [b],
    [c],
    [d] {
        width: 30px;
        height: 100px;
        background: #F2994A;
        top: 19.3%;
        left: 38.8%;
        transform: rotate(45deg);
        border-radius: 0 0 0 10px;
    }

    [b],
    [d] {
        height: 80px;
        top: 36.5%;
        left: 37%;
        transform: rotate(135deg);
        border-radius: 5px 0 10px 0;
    }

    [c],
    [d] {
        background: #2D9CDB;
        top: 46.9%;
        left: 53.2%;
        border-radius: 0 10px 0 0;
    }

    [d] {
        top: 36%;
        left: 55%;
        border-radius: 10px 0 5px 5px;
    }
</style>