如何对角拆分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文本上使用skew并使用z-index在div下定位图像？

Answer 3

对角屏蔽图像已在此处回答： Cutting image diagonally with CSS3

这里他们使用了clip-path而不是一个div屏蔽另一个。
然后可以为文本重叠一个div。

但请记住这在响应式设计中的表现如何。