半傾斜的div邊框

Question

我有一個div，我需要它在頂部和底部有一個傾斜的邊框，並且在左邊和右邊有一個直的邊框。並且角落應該是圓形的。我不知道我是否解釋清楚。

<div class="container"> 
    <div class="content"> 
    </div> 
</div> 

CSS的部分是這樣的：

.container {-moz-transform:rotate(-1deg); border-radius:25px; border:solid 0 gray; border-width:2px 0;} 
.content {-moz-transform:rotate(1deg); border:solid 0 gray; border-width:0 2px;} 

這不做工精細，邊框看起來並不連續。我也試過

.container {-moz-transform:rotate(-1deg); border-radius:25px; border:solid 2px gray;} 
.content {-moz-transform:rotate(1deg);} 

但是這不是好的，因爲左右邊界也是傾斜的，我需要它們是直的。

希望有人能夠理解我的問題並幫助我。謝謝。！

後來編輯：我附上了一個圖像，所以你可以有一個想法，我需要它的樣子。 example

Answer 1

你爲什麼不嘗試

.container{-moz-transform:skew(0deg, -1deg);} 
.content{-moz-transform:skew(0deg, 1deg);} 

Answer 2

如果你給.container邊界頂部和底部，但不是左和右，它不會工作;和.content邊界左右，但不是頂部和底部？

然後頂部和機器人邊框將會傾斜，而左側和右側邊框則不會。
您可以添加-2px的左右邊距;到.content，以便邊框看起來是連續的。 （傾斜可能將它們分開，雖然）。

.container { 
    -moz-transform:rotate(-1deg); 
    border-radius:25px; 
    border-top: solid 2px 0 gray; 
    border-bottom: solid 2px 0 gray; 
} 
.content { 
    -moz-transform:rotate(1deg); 
    border-radius:25px; 
    border-left: solid 2px 0 gray; 
    border-right: solid 2px 0 gray; 
    margin-left: -2px; 
    margin-right: -2px; 
}