Html 如何实现倾斜的右边缘div？

我已经搜索了几天了，寻找使div的右边缘倾斜45度的代码。这是一个我特别想得到的图像示例

“斜边”div的例子似乎很多，但我找不到任何具有特定右侧斜边的例子

我花了很多时间试图改变其他人的密码，但结果却是一团糟

这是最初的CSS代码，我正在试验，以获得我需要的结果

    div {
        position: relative;
        display: inline-block;
        padding: 1em 5em 1em 1em;
        overflow: hidden;
        color: #fff;
    }

    div:after {
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: #000;
        -webkit-transform-origin: 100% 0;
        -ms-transform-origin: 100% 0;
        transform-origin: 100% 0;
        -webkit-transform: skew(-45deg);
        -ms-transform: skew(-45deg);
        transform: skew(-45deg);
        z-index: -1;
    }

    body {
        background:
        url('https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg');
        background-size: cover;
    }

这是HTML

    <div>Slanted div text</div>
    <div>
        Slanted div text<br/>
        on several lines<br/>
        Another line
    </div>
    <div>Wider slanted div text with more text inside</div>

倾斜div文本
倾斜div文本

在几行上

另一行
更宽的倾斜div文本，内部有更多文本

创建div，然后覆盖一个绝对定位、旋转的伪元素以创建倾斜的印象

div{
高度：50px；
宽度：300px；
背景色：黑色；
位置：相对位置；
溢出：隐藏；
}
部门：之后{
身高：100%；
宽度：100%；
背景色：白色；
位置：绝对位置；
内容：“；
变换：旋转（45度）；
变换原点：右下角；
}

---

您需要组合2或3个div，其中一个具有负右偏移量，并通过类似于

变换：旋转（45度）

基思的方式旋转。。。我很高兴我对“补偿”的理解足以让我尝试你的建议。太棒了！非常感谢。不过我还有一个问题，迈克尔。。。我怎样才能把文本放在div中，而不让整个事情分崩离析呢？我不知道你想完成什么（例如，简单文本、长文本、横幅符号、长段落等）。但是，有一种方法可能对您有用：谢谢，我通过重叠div和使用z索引-1来实现它的工作。是否可以使此技术工作（或其他方式），例如，当

body

具有

background image

（不设置

：之后

）？原始OP的代码在其

正文中有图像。