如何使用css歪斜div

Question

我有div並且想知道我如何能夠輕微地傾斜/歪斜底部和右側。

我可以創建三角形，並傾斜所有面，只是不知道如何扭曲兩面。

這可能嗎？謝謝。

Answer 1

您可能可以使用:before和:after CSS選擇器。我剛剛舉了一個粗略的例子。

JSFiddle

HTML：

<div class="slanted"></div> 

CSS：

.slanted { 
    position: relative; 
    height: 200px; 
    width: 380px; 
    min-width: 380px; 
    max-width: 380px; 
    background: #000; 
} 

.slanted:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    border-right: 180px solid #000; 
    border-top: 100px solid #000; 
    border-bottom: 100px solid #fff; /* page background color */ 
} 

.slanted:after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    right: 0; 
    border-left: 200px solid #000; 
    border-bottom: 200px solid #fff; /* page background color */ 
} 

Answer 2

在新的瀏覽器，你可以使用CSS變換。

此代碼將歪斜一個div：

-webkit-transform: matrix(1, 0, 0.6, 1, 250, 0); 
-o-transform: matrix(1, 0, 0.6, 1, 250, 0); 
transform: matrix(1, 0, 0.6, 1, 250, 0); 

結果會是這個樣子：

JSFiddle

Mozilla的開發者網絡擁有an article告訴更多不同的變換你可以申請。它也有幾個例子，並有details about browser compatibility。