css art #1

by Richard Hunter

HTML

<div class="foo"></div>

SCSS

.foo {
    background : red;
    width : 200px;
    position : relative;
    left : 100px;
    top : 100px;
    height : 100px;
    &:before, &:after {
        content :"";
        display : block;
        position : absolute;
    }
    &:before {
        left : 40px;
        top : -20px;
        width : 200px;
        height : 50px;
        background : yellow;
    }
    &:after {
        top : 50px;
        left : 50px;
        background : lightblue;
        height : 30px;
        width : 50px;
            box-shadow : 0 0 0 10px blue;
    }
}