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属性的影响。

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

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

创建一个矢量图像，它具有您想要的倾斜度，它覆盖了您想要的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创建一个倾斜的边缘

5 个答案: