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 {
  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>

关于html - 如何实现倾斜的右边缘 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44710868/

上一篇：html - 当我处于特定宽度下时，我的 div 全部堆叠在一起

下一篇：html - 如何使按钮看起来好像具有透明边框/描边？

相关文章：

html - Telerik 控件 - 背景图像未在 IE8 中显示

javascript - 在 Weebly 中维护产品图像大小和纵横比

javascript - 创建动态表单

CSS 在对 Angular 线上创建一个盒子阴影

html - 高度从顶部增加

css - 如何更改 Bootstrap 的全局默认字体大小？

javascript - 下划线在鼠标悬停时展开

html - Firefox 无法检测到我的 css 文件，但 IE 可以

html - 如何制作上下箭头

css - 如何制作一个圆形的div？