make css box rotate from all sides

Question

I want to make a css box with rotation. here is the image that I'd like:

Can anyone help me to make the same? Here is the code that I have used.

.yr_highlights 
{
    background: none repeat scroll 0 0 #000000;
    height: 30px;
    margin: 24px auto 0;
    text-align: center;
    transform: skewY(-7.4deg);
    width: 20%;
}    
<div class="yr_highlights"></div>

Answer 1

See this Fiddle

.box {
    background: red;
    width: 200px;
    height: 50px;

    -webkit-transform: skewY(-7deg) skewX(-17deg);
    -moz-transform: skewY(-7deg) skewX(-17deg);
    transform: skewY(-7deg) skewX(-17deg);   

    margin: 50px 0 0 50px;
}