如何對角分割一個HTML元素

Question

我想知道什麼是對角線分裂元素的最佳方法，以便它看起來像下面的圖像，使用任何手段的HTML/CSS/JS？圖像不應該被修改，而只是被掩蓋。

我試圖做歪斜，但不幸圖像失真。我無法弄清楚可以重複使用不同長度的文本的結構。

Answer 1

您可以通過重疊2周的div實現這一點，歪斜其中之一，就像我在這個小提琴是怎麼做：https://jsfiddle.net/s0h2g0zw/

#parallelogram { 
    width: 150px; 
    height: 100px; 
    -webkit-transform: skew(20deg); 
     -moz-transform: skew(20deg); 
     -o-transform: skew(20deg); 
    background: red; 
} 

#square { 
    width: 100px; 
    height: 100px; 
    background: red; 
    position:absolute; 
    left:0px; 


} 

你可能想看看更多的其他例子：https://css-tricks.com/examples/ShapesOfCSS/

希望這將幫助你:)

Answer 2

如果你使用div文本背景顏色和z-index下的div定位圖像的歪斜？

Answer 3

遮蔽角已經在這裏找到答案圖像： Cutting image diagonally with CSS3

在這裏，他們用夾路徑，而不是一個div蒙其他。
然後可以覆蓋文本的div。

但是請記住，這將如何看待響應式設計。