为div创建倾斜边缘[重复]答案

【问题标题】：Create a slanted edge to a div [duplicate]为div创建倾斜边缘[重复]
【发布时间】：2015-06-07 06:04:46
【问题描述】：

我正在尝试创建一个倾斜的 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，而您的解决方案使执行此操作变得困难，正如 cmets 回复所建议的那样。倾斜也需要向上倾斜，而不是向下倾斜，我在不影响 div 左侧的情况下努力做到这一点。用你的例子，我不知道如何在 div 顶部添加文本，但我很害怕。

【问题讨论】：

你有一个应该是什么样子的例子吗？
什么样的倾斜？倾斜到什么程度？你想要的倾斜度是多少？你的意思是像this kind of slant，或者可能是不同类型的倾斜？向左倾斜？向右倾斜？ 80度的倾斜会让你害怕！也许只在左边缘有一个倾斜，或者可能是一个摆动的倾斜使它看起来像一个树篱？
对不起，我应该更具体，只是一个标准的 45 度向右上角倾斜。 @MLeFevre 你是对的，但我只希望右侧倾斜，而不是倾斜的文本。对不起，我不够清楚。
Web-tiki 在链接问题中的答案是您正在寻找的（响应式）
他的回答并不完全正确，正如人们在他的帖子中指出的那样，很难在他的解决方案中添加任何文本。无论如何，我不知道如何取消重复这个问题。

标签： html css css-shapes

【解决方案1】：

这可以使用 CSS clip-path（和 -webkit-clip-path）轻松实现

Example here

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

【讨论】：

我赞成提到 Clippy 工具。谢谢大佬！

【解决方案2】：

接受答案的问题是，当您将图像作为父元素的背景时，它不起作用。我改用内联 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

【讨论】：

【解决方案3】：

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

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

伪元素堆叠在带有负号z-index的div内容后面：

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>

【讨论】：

当我添加position: absolute时，我失去了黑色背景，你知道为什么吗？从我的代码可以看出，这个定位是用来将图片左上角的文字放在上面的，因为HTML代码实际上是img和div（我把h3改成了div)
@germainelol 请分享重现您的问题的代码，以便我了解如何解决它。
jsfiddle.net/31myb1vp/1 这是一个 jsfiddle，对不起，我包含了所有引导程序，因此挑选出我想要的部分需要很长时间，但顶部是与 HTML 相关的 CSS
@germainelol 问题是倾斜的元素隐藏在图像后面。我在.headline-badge jsfiddle.net/webtiki/31myb1vp/3 上使用z-index:1; 解决了它
非常感谢，我没想过简单地使用z-index。感谢您的帮助！

【解决方案4】：

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

【讨论】：

没有任何解释您为什么推荐这个特定的解决方案或它是如何工作的，任何人都不清楚这个解决方案是否适合他们。请记住，您不仅要为 OP 回答问题，而且还要为在寻找解决方案时找到您的答案的每个人回答他们可能遇到的类似问题。

【解决方案5】：

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

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

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

我希望这会有所帮助。

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

【讨论】：