如何僅在父元素中使用傾斜？

Question

有沒有什麼辦法只在父元素中使用偏斜？ 我需要創建一個像鑽石一樣的面具，並且子元素不會受到影響。在這種情況下，沒有辦法使用png作爲掩碼。 在此先感謝！

Answer 1

任何transform屬性影響應用到和所有他的孩子的元素。

因此，單個「父」元素的唯一方法是讓它沒有孩子（即：它不能是父母！）。

Answer 2

你可以嘗試詳細闡述一下你想得到什麼結果？

skew（），就像所有變換屬性總是影響子元素一樣。您可以嘗試在相同位置使用兩個HTML塊，一個使用skew（），另一個使用內容。另外，如果你只是想要一個鑽石，一個帶有scale（）和rotate（）的矩形框應該足夠了，但是再沒有孩子。

如果你想鑽石作爲面具，我敢肯定，它會更容易渲染鑽石中不存在的部分。渲染鑽石的外部部分不應該那麼辛苦，畢竟它們只是矩形的三角形。

Answer 3

這很容易，你只需要糾正孩子的事情。取消校正意味着應用另一個偏斜變換，但這次是相反的角度。

.parent { transform: skewX(45deg); } 
.parent > * { transform: skew(-45deg); } 

在一般情況下，如果你申請一個號的父元素的變換和你想要的子元素去恢復正常，那麼你必須採用相同的變換，只按相反的順序（順序並在大多數情況下是重要的！），並且減去用於傾斜，旋轉或平移的角度/長度值。在規模的情況下，您需要一個比例因子1/scale_factor_for_parent。也就是說，對於比例尺，你可以這樣做：

.parent { transform: scale(4); } 
.parent > * { transform: scale(.25); /* 1/4 = .25 */ } 

有孩子的菱形很容易。

DEMO

結果：

HTML：

<div class='wrapper'> 
    <div class='diamond'> 
    <div class='child'>Yogi Bear</div> 
    <div class='child'>Boo Boo</div> 
    </div> 
</div> 

CSS：

.wrapper { 
    overflow: hidden; 
    margin: 0 auto; 
    width: 10em; height: 10em; 
} 
.diamond { 
    box-sizing: border-box; 
    margin: 0 auto; 
    padding: 4em 1em 0; 
    width: 86.6%; height: 100%; 
    transform: translateY(-37.5%) rotate(30deg) skewY(30deg); 
    background: lightblue; 
} 
.child { 
    transform: skewY(-30deg) rotate(-30deg); 
} 

Answer 4

實現此目的的唯一方法是使用position:absolute;將子元素從文檔流中提取出來，並對孩子施加相同的負程度歪斜。

問題在於您現在不得不手動調整父級的大小。