css3 shapes

by kapilgopinath

HTML

<div class="square">
    <div class="trapeziumRt"></div>
    <div class="trapeziumLt"></div>
</div>

CSS

.square {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
}
.trapeziumRt {
    border-bottom: 43px solid green;
    border-left: 50px solid transparent;
    border-right: 0px solid transparent;
    height: 0;
    width: 50px;
    position: absolute;
    top: 27px;
    right: -28px;
    -webkit-transform: rotate(-90deg);
}
.trapeziumLt {
    border-bottom: 43px solid #C6C76F;
    border-left: 50px solid transparent;
    border-right: 0px solid transparent;
    height: 0;
    width: 50px;
    position: absolute;
    top: 27px;
    left: 0;  
    -ms-filter: "FlipH";
    -webkit-transform: rotate(-89deg);