如何變換簡單的CSS框

-3

我有一個簡單的框。我需要像在圖像中那樣轉換它。有沒有辦法用CSS做到這一點？如何變換簡單的CSS框

.box-wrapper{ 
    border: 3px solid #fff; 
    width: 397px; 
    height: 130px; 
}

來源

2015-09-18 user3351236

亮2秒谷歌給了我這個例子http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transform – Cageman

這是你可以從css3初學者教程中獲得的最基本的東西嘗試搜索w3schools中的'skew' http://www.w3schools.com/cssref/playit.asp?filename=playcss_transform_skew – Arpita

您可以使用transform: skewY(20deg)做到這一點。您還應該考慮轉換原點（轉換計算所在的元素上的點）。在這種情況下，我已經將它設置爲transform-origin: top left;

.box-wrapper{ 
    border: 3px solid #fff; 
    width: 397px; 
    height: 130px; 
    background: #000; 
    transform: skewY(20deg); 
    transform-origin: top left; 
}

http://jsfiddle.net/daynsxLt/3/

來源

2015-09-18 06:23:50

我認爲你需要提及'transform-origin '以及。目前它正在切斷屏幕。 –

使用變換原點的更新答案。 –

.box-wrapper { 
 
    background: black none repeat scroll 0 0; 
 
    border: 3px solid #fff; 
 
    height: 130px; 
 
    transform: skew(0, 15deg); 
 
    width: 397px; 
 
    transform-origin: left center 0; 
 
}

<div class="box-wrapper"></div>

來源

2015-09-18 06:20:32 BesLoi

如何變換簡單的CSS框

回答

相關問題