差距變換：旋轉

我試圖創建一個帶有鋸齒狀邊緣的盒子，這實際上可以作爲HTML元素應該和可以調整大小等差距變換：旋轉

終於拿到我的頭圍繞邊界圖像，得到它好看，然後當我旋轉它，它越邊境圖像和主填充之間的差距：

The Problem

我GOOGLE了它，並找到答案的SO告訴某人設置

-webkit-backface-visibility: hidden;

這清除了它，但顯然只有在webkit瀏覽器。

我也嘗試過使用-moz-backface-visibility，但它並沒有清除Firefox中的問題。

有什麼建議嗎？

jsFiddle

E：其實我想我可能能夠通過設置背景顏色，然後設置background-clip到padding-box修復它，但老實說它只是把我留在相同的位置。

來源

2014-03-12 user2992596

一招是設置角度（而不是背面可見性）

.box.one { 
    -webkit-transform: perspective(999px) rotate(1deg); 
    -moz-transform: rotate(1deg); 
    -ms-transform: rotate(1deg); 
    -o-transform: rotate(1deg); 
    transform: perspective(999px) rotate(1deg); 
}

fiddle

來源

2014-03-12 17:10:34 vals

令人驚歎，這正是我需要。我希望能有一個「只是讓它工作」的技巧。 – user2992596

添加帶有負邊距的after僞類似於修復Firefox問題。

.rough:after { 
    content: ""; 
    display: block; 
    margin: -1px; 
    height: 302px; 
    background: black; 
}

小提琴演示：http://jsfiddle.net/Wkk7W/3/

注意，顯示：塊似乎是我的黑客/修復的重要組成部分。

更新：根據您的計劃內容裏面 div，這個確切的例子可能不適合。不過，我認爲這個概念可以根據您的要求進行調整 - 例如使用3px寬的黑色邊框代替背景填充，並使用position：absolute來允許其他文本在框的頂部分層。

來源

2014-03-12 12:27:36

不錯！對於我的需求並不完美，但我現在正在搞這個，用這個作爲基礎提出了幾個不同的解決方案，但沒有完美的滿足我的需求。我認爲'display：block'是必不可少的，只是因爲寬度沒有設置在僞元素上，如果我將元素設置爲相對，僞爲絕對和「寬度：100％」，那麼它不需要'display：block' – user2992596

瞭解它的內容和流體高度，只是無法獲得流體寬度完美，但它涵蓋了我的需求。如果我在幾個小時內沒有得到更好的回覆，我會將其標記爲答案，繼承我的內容：http://jsfiddle.net/Wkk7W/5/ – user2992596

要回答自己，因爲這個解決方案實際上覆蓋了我的需求，「作爲一個html元素應該是，並且可以調整大小等等」，儘管我從Grants開發這個解決方案的答案。

http://jsfiddle.net/Wkk7W/6/

設置元素position:absolute，然後給它一個僞元素有：

content: ""; 
display: block; 
position: absolute; 
top: 0; 
width: 102%; 
margin: -1px 0 0 -1%; 
height: 102%; 
background: black; 
z-index: -1;

這樣，它保持元素的寬度和高度，Z-指數：-1把它背後文本。它可能不需要顯示：塊，我沒有檢查。

仍然有一些微小的差距，但他們基本上不可能覆蓋，我很滿意它的方式。能解決無論是在WebKit和FF的問題

來源

2014-03-12 14:34:37 user2992596

差距變換：旋轉

回答

相關問題