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

Question

我已经搜索了几天，寻找能让 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>

- Jamie Sexton

---

您需要将2或3个div组合在一起，内部的div具有负的右偏移，并通过类似于transform: rotate(45deg)的方式进行旋转。 - Keith M

Keith...我觉得我已经理解了“偏移量”，可以尝试一下你的建议。 - Jamie Sexton

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>

- Michael Benjamin

---

太棒了！谢谢！ - Jamie Sexton

迈克尔，我还有一个问题......如果我想在 div 中放置文本而不使整个页面变形，该怎么做？ - Jamie Sexton

我不确定您的目标是什么（例如简单文本、长文本、横幅标志、长段落等）。但这里有一个可能适合您的方法: https://jsfiddle.net/q1gnpea7/ - Michael Benjamin

谢谢，我通过重叠div并使用z-index -1使它工作了。 - Jamie Sexton

这种技术是否可行（或其他方式），例如当body具有background-image时（而无需为:after设置背景）？原始帖子的代码在其body中具有图像。 - Vadim Ovchinnikov