線性漸變不適用於：偽之前

Question

我正在嘗試在div上創建一個三角形的切割效果，但是其背景被渲染為矩形，不確定原因：

 body { background: #333; } .parent { height: 200px; background: yellow; position: relative; overflow: hidden; display: block; } .parent:before { content: ''; position: absolute; bottom: 0; width: 100%; height: 20%; background: linear-gradient(190deg, transparent 20%, #FFFFFF 20.2%), linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 100%); z-index: 2; } 

 <div class="parent"></div> 

試圖實現這樣的目標：

我不希望“剪切” .parent div。 如果可能，我希望cut位於父div頂部的另一個div上。 三角形切口將為白色，其余部分將為透明（以顯示.parent div上的.parent 。

因此，以上面的圖片為例：

• Yellow div是.parent 。
• 白色三角形為.slant 。

Answer 1

您可以在div元素上使用clip-path屬性來實現這種效果。

clip-path: polygon(0 0, 100% 0, 100% 100%, 0 50%);

剪切路徑屬性使您可以將元素剪切為形狀。 多邊形方法使您可以非常精細地控制沿元素創建線性路徑。 通過指定多邊形的頂點來使用它。 可以指定大量的頂點來創建復雜的形狀。 它們是順時針指定的。

http://www.cssplant.com/clip-path-generator

如果您自己無法通過代碼創建形狀，請使用此工具來創建形狀。

在這種情況下。 第一個坐標給您x = 0，y = 0; 這是左上角。 下一個坐標選擇最右邊的角。
然后右下角最后，左邊緣的中間部分在50％。

剪輯路徑將擦除該路徑之外的背景。

注意：div本身仍然是一個矩形塊，如果高度和填充處理不當，則其內部的元素可能會溢出可見邊緣。

 body { background: #333; } .parent { height: 200px; background: yellow; position: relative; overflow: hidden; display: block; z-index: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 50%); } .parent-white { height: 200px; background: white; } 

 <div class="parent-white"> <div class="parent"> </div> </div> 

Answer 2

您之前的背景正在工作。 只需更改顏色並測試。

像這個例子：

background: linear-gradient(190deg, transparent 20%, #000000 20.2%), linear-gradient(90deg, #ff0000 0%, #00ff0d 100%)

Answer 3

您可以像下面那樣調整代碼，而無需偽元素：

 body { background: #333; } .parent { height: 200px; background: linear-gradient(yellow,yellow) top /100% 30%, linear-gradient(to bottom left,yellow 50%,transparent 50.5%) bottom/100% 70%; background-repeat:no-repeat; } 

 <div class="parent"></div> 

更新資料

 body { background: #333; } .parent { height: 200px; background: yellow; position:relative; } .parent:before { content:""; position:absolute; top:30%; left:0; right:0; bottom:0; background:linear-gradient(to bottom left,transparent 50%,#fff 50.5%); } 

 <div class="parent"></div>