创建到div的倾斜边缘

Question

我正在尝试创建一个倾斜的div，在我所看到的任何地方，我都发现了如何使用某种边框来完成此操作，该方法将不起作用，因为div将放置在图像的顶部。

因此，目前使用Bootstrap的代码如下：

<div class="thumbnail">
    <a href="#">
        <img class="img-responsive" src="banner.jpg">
        <h3 class="headline-badge">slanted div text</h3>
    </a>
</div>

这是相关的CSS：

.thumbnail img.img-responsive {
    width: 100%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.headline-badge {
    color: #fff;
    margin-top: 0;
    padding: 2%;
    position: absolute; 
    top: 0;
    left: 0;
    overflow: hidden;
    background-color: #000;
}

因此，我想向右上方倾斜。我尝试使用边框很少成功或没有成功，并且每当我尝试使边框透明时，都不会显示边框。

有谁对如何使用CSS创建它有任何想法吗？我认为它也应该具有响应性，这是一个主要问题，因为倾斜不能仅仅是固定的高度/宽度。

倾斜角度应约为45度，并且只能位于div的右侧。文字不应受到偏斜的影响。

感谢您发布此小提琴，但实际上我需要向div中添加文本，并且您的解决方案很难做到这一点，因为回复中的注释表明了这一点。倾斜也需要向上倾斜，而不是向下倾斜，而我在不影响div左侧的情况下很难做到这一点。对于您的示例，我很担心，但我不知道如何在div顶部添加文本。

Answer 1

您可以使用倾斜的伪元素来制作元素的倾斜纯色背景。这样，文本将不受transform属性的影响。

transform origin属性允许伪元素从右下角倾斜，并且溢出的部分用隐藏overflow:hidden;。

伪元素以负数堆叠在div的内容后面z-index：

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;

}


<div>slanted div text</div>

<div>

  slanted div text<br/> on several lines<br/> an other line

</div>

<div>wider slanted div text with more text inside</div>