为 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 创建这个吗？我相信它也应该是响应式的，这是一个主要问题，因为倾斜不能只是固定的 height/width.

倾斜度应该在 45 度左右，并且只在 div 的右侧。文本不应受到倾斜的影响。

效果应该是这样的：

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

感谢您发布此 fiddle，但我实际上需要向 div 添加文本，而您的解决方案很难做到这一点，正如回复中的评论所建议的那样。倾斜也需要向上倾斜，而不是向下倾斜，我努力在不影响 div 左侧的情况下做到这一点。以你的例子我无法弄清楚如何在 div 之上添加文本，但我很害怕。

Answer 1

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

变换原点属性允许伪元素从右下角倾斜，溢出部分用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

我认为您正在尝试为横幅或简单的点击区域添加倾斜度。我要给出的建议来自亚马逊和google等主要网站的做法。如下：

创建一个具有您想要的倾斜度的矢量图像，它覆盖了您想要的 div 的比例。然后，当您将其添加为叠加层时，您可以将其设置为 position:absolute，z-index 大于 div 中的任何内容。

这将大大减少处理，缓存图像的加载速度将与 css 一样快。这也将防止跨浏览器问题。

希望对您有所帮助。

PS：矢量图像可以很好地调整大小，因此您不必担心像素化和任何类似的问题。

Answer 3

**background-image: -webkit-linear-gradient(130deg, rgba(113, 182, 46, .6) 78%, rgba(0, 0, 0, 0) 0%);**

Answer 4

这可以使用 CSS clip-path（和 -webkit-clip-path）

轻松实现

Example here

我还发现 this handy tool 可以轻松生成 CSS 代码。

Answer 5

已接受答案的问题是，当您将图像作为父元素的背景时，它不起作用。我改用了内联 svg 背景。

Html

    <div class="parent">
      <div class="slanted">
         I have a slanted edge
     </div>
   </div>

Css

    .parent {
              background-image: url('http://lorempixel.com/600/350');
              background-size: cover;
              background-position: center center;
              padding: 100px;
     }

    .slanted {
                color: white;
                background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 100' xmlns='http://www.w3.org/2000/svg'  preserveAspectRatio='none'><polygon points='0,300 0,0 150,0 300,300' width='100%' height='100%' style='fill:blue;'/></svg>");
                background-size:contain;
                width: 30%;
                font-size: 2em;
                padding: 4px 40px;
   }

注意：您可能需要稍微调整一下 svg 以及高度和宽度。接受的答案应该适用于大多数情况。它对我不起作用，因为我有一个具有图像背景的父元素。

以下是 svg 标签上的一些资源：

https://www.w3schools.com/graphics/svg_intro.asp

https://developer.mozilla.org/en-US/docs/Web/SVG

https://www.w3schools.com/graphics/svg_polygon.asp

为 div 创建斜边

Create a slanted edge to a div

html

css

css-shapes