Edit in JSFiddle

.face{
    height:200px;
    overflow: hidden;
    position: absolute;
    width: 200px;
}

.top{
    background:#09f;
    border: 1px solid;
    top: 0px;
    left: 89px; 
    -webkit-transform: rotate(-45deg) skew(15deg, 15deg);
    -moz-transform: rotate(-45deg) skew(15deg, 15deg);  
}

.left{
    border: 1px solid;
    top: 155px;
    left: 0px;
    background: #09f;
    -webkit-transform: rotate(15deg) skew(15deg, 15deg);
    -moz-transform: rotate(15deg) skew(15deg, 15deg);       
}

.right{
    border: 1px solid;
    top: 155px;
    left: 178px;
    background: #09f;
    -webkit-transform: rotate(-15deg) skew(-15deg, -15deg);
    -moz-transform: rotate(-15deg) skew(-15deg, -15deg);    
}