为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的右侧.该文本不应受斜面影响.

效果应该类似于:

http://jsfiddle.net/webtiki/yLu1sxmj/

感谢您发布这个小提琴,但我需要实际添加文本到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>

Answer 2

这可以使用 CSS clip-path( 和-webkit-clip-path)轻松实现

示例在这里

我还发现了这个方便的工具，可以轻松生成 CSS 代码。