使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); 
}