Shape square effect

Question

I started do a simple shape or square just using CSS3 but I got stuck, Do you know how can I make the effect below?

Pic:

My CSS:

.square{
    width: 150px; 
    height: 100px; 
    -webkit-transform: skew(20deg); 
    -moz-transform: skew(20deg); 
    -o-transform: skew(20deg); 
    background: red;
}

Answer 1

You can sort of create that with triangular borders.

#box {
    width: 300px;
    height: 150px;
    border-left: 400px solid #e3dd2d;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    position: relative;
}
#box:after {
    content: "";
    position: absolute; 
    width: 0; 
    height: 0; 
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;   
    border-top: 70px solid #e3dd2d;
    position: absolute;
    left: -220px;
    bottom:-80px;   
}

Example

UPDATE

#box {
        width: 300px;
        height: 150px;
        border-left: 400px solid #e3dd2d;
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent;
        position: relative;
    }
    #box:after {
        content: "";
        position: absolute; 
        width: 0; 
        height: 0; 
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;   
        border-top: 70px solid #e3dd2d;
        position: absolute;
        left: -220px;
        bottom:-80px;   
    }
    #box div {
        display: table;
        margin-left: -400px;
        text-align: center;  
    }
    #box div span{  
        display: table-cell;
        width: 400px;  
        height: 150px;
        vertical-align: middle;  
    }

<div id="box">
    <div>    
        <span>
            Some text inside           
        </span>
    </div>  
</div>

UPDATED EXAMPLE