背景填充問題

我的代碼應該執行以下操作：旋轉5度的背景大半黑條。 JSFiddle 背景填充問題

<div class="con-fluid"><div class="_978y"></div></div> 

.con-fluid{ 
    width: 100%; 
} 
._978y{ 
    background-color: #2d2d2d; 
    width: 200%; 
    height: 296px; 
    position: absolute; 
    -webkit-transform: rotate(5.13deg); 
    -moz-transform: rotate(5.13deg); 
    -ms-transform: rotate(5.13deg); 
    -o-transform: rotate(5.13deg); 
    transform: rotate(5.13deg); 
    }

/*你可以看到，旋轉代碼是通用，以確保它適用於幾乎所有的瀏覽器/ 問題：它不填充在其兩端。您可以在代碼預覽中清楚地看到它。

我想要的是基本上填充這個空白區域，所以它不會看圖表。有什麼想法嗎？

在此先感謝。

來源

2016-04-06 Ahmed

您的查詢不清楚。填寫什麼意思？填充哪個空白區域？ – Roy

在JSFiddle中，右：左：http://prntscr.com/aoose8 ..這是我正在談論的空白區域 – Ahmed

我不太理解你的查詢，但是，我想你是在問關於矩形右上角缺少的「三角形」。它在那裏是因爲你旋轉了矩形。

要隱藏它，請將margin-top: -10px;放入._978y的css中，將矩形向上移動10px。

來源

2016-04-06 01:52:50 Ethernetz

在JSFiddle中，右：左：http://prntscr.com/aoose8 ..這個是我正在談論的空白區域，邊緣頂部沒有任何關係。我想用相同的旋轉填充這個空白區域。所以它看起來像這樣http://prntscr.com/aoosoq – Ahmed

然後可能將它變成左邊10px？ – Ethernetz

爲什麼我會將它轉換爲左邊10px？如果我這樣做了，另一端會再次出現切割。我只是想讓它看起來是正確的，就好像它的寬度大了105％左右然後居中。但不幸的是，如果我有這樣的div的絕對位置，它仍然會顯示滾動條。即使在溢出隱藏事件之後，內容本身也會被類中指定的寬度所推動，因此響應性將被破壞。你能給我一個關於這個的準確答案嗎？ – Ahmed

背景填充問題

回答

相關問題