如何对角分割html元素答案

【问题标题】：How to diagonally split an html element如何对角分割html元素
【发布时间】：2016-07-28 00:20:06
【问题描述】：

我想知道使用 html/css/js 的任何方式对角分割元素的最佳方法是什么，使其看起来像下图？图像不应被修改，而只是被蒙版。

我尝试使用倾斜，但不幸的是扭曲了图像。我真的想不出一个可以在不同长度的文本中重复使用的结构。

【问题讨论】：

请向我们展示您迄今为止尝试过的代码？
将图片包裹在一个div元素中，然后倾斜这个div元素；

【解决方案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/

希望对你有帮助:)

【讨论】：

【解决方案2】：

如果你对带有背景颜色的 div 文本和带有 z-index 的 div 下的定位图像使用倾斜？

【讨论】：

【解决方案3】：

此处已回答对角线遮罩图像： Cutting image diagonally with CSS3

在这里，他们使用剪辑路径而不是一个 div 遮盖另一个。
然后可以为文本覆盖一个 div。

但请记住这在响应式设计中的外观。

【讨论】：