让css盒从四面八方旋转

Question

我想用旋转制作一个css框。这是我想要的图像：

任何人都可以帮助我做同样的事吗？这是我用过的代码。

.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

请参阅此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;
}

Answer 2

.yr_highlights {
    transform: rotate(-10deg);
}