Stackoverflow - Is it possible to make this shape using css?

http://stackoverflow.com/q/7462180/918414

by acturbo

HTML

<script src="http://thinkingstiff.com/stackoverflow/jsfiddle.js"></script>
<div class="quadrilateral"></div>













































































































































































































<script>
    initializeHeader( 
        'Is it possible to make this shape using css?',
        'http://stackoverflow.com/q/7462180/918414'
    );
</script>

CSS

.quadrilateral {
    background-color: red;
    height: 50px;
    margin: 60px;
    position: relative;
    width: 300px;
}
.quadrilateral::before {
    background-color: red;
    content: '';
    display: inline-block;
    height: 61px;
    position: absolute;
    right: -3px;
    top: -11px;
    transform:             skewX( -5deg ); 
        -ms-transform:     skewX( -5deg ); 
        -webkit-transform: skewX( -5deg ); 
        -o-transform:      skewX( -5deg ); 
        -moz-transform:    skewX( -5deg ); 
    width: 10px;
}
.quadrilateral::after {
    background-color: red;
    content: '';
    display: inline-block;
    height: 15px;
    position: absolute;
    top: -6px;
    transform:             skewY( -2deg ); 
        -ms-transform:     skewY( -2deg ); 
        -webkit-transform: skewY( -2deg ); 
        -o-transform:      skewY( -2deg ); 
        -moz-transform:    skewY( -2deg ); 
    width: 300px;
}