Rubber textured window

by Bacher

HTML

<div class="table">
    <div class="head">HEAD</div>
    <div class="body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt et rerum placeat corrupti nihil obcaecati eos similique quis soluta veniam dicta blanditiis, porro repudiandae consectetur unde, architecto quasi. Incidunt, architecto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>

SCSS

.table {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 300px;
    height: 100px;
    background: rgba(0,0,255,0.5);
    
    &:before {
        position: absolute;
        bottom: 100%;
        width: 300px;
        height: 50px;
        background: rgba(255,0,0,0.5);
        content: "";
    }
    
    &:after {
        position: absolute;
        top: 100%;
        width: 300px;
        height: 50px;
        background: rgba(0,255,0,0.5);
        content: "";
    }
    
    .head, .body {
        position: absolute;
        z-index: 1;
    }
    
    .head {
        top: -50px;
    }
    
    .body {
        top: -20px;
    }

}