如何实现倾斜的右边div？

Question

我已经搜索了几天代码，使div倾斜45度的右边缘。以下是我特别想要的图片示例......

似乎有许多“倾斜边缘”的例子。 divs，但我找不到任何特定的右侧倾斜。

我花了很多时间试图改变其他人的代码，但结果却很乱。

这是我正在尝试获取我需要的结果的原始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>

Answer 1

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

div {
  height: 50px;
  width: 300px;
  background-color: black;
  position: relative;
  overflow: hidden;
}

div:after {
  height: 100%;
  width: 100%;
  background-color: white;
  position: absolute;
  content: "";
  transform: rotate(45deg);
  transform-origin: bottom right;
}

<div></div>