html - 使css框从各个方向旋转

我想做一个旋转的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>

最佳答案

看这个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;
}