为div创建一个倾斜的边

我试图创建一个倾斜的div，并在我看过的任何地方我刚刚发现了如何使用某种类型的边框来做到这一点，因为div会放在图像的顶部。为div创建一个倾斜的边

所以在目前的代码如下使用引导：

<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上添加文本，尽管我很害怕。

来源

2015-04-02 germainelol

你有一个它应该是什么样子的例子吗？ – 2015-04-02 10:15:58

什么样的倾斜？如何倾斜？你想要的斜度是多少？你的意思是像[这种倾斜]（http://jsfiddle.net/9j02jxc7/），或者可能是一种不同类型的倾斜？向左倾斜？向右倾斜？一个80度的倾斜会让你吓一跳！也许只是在左边缘倾斜，或者可能是一个摇摆的倾斜，使它看起来像一个对冲？ – MLeFevre 2015-04-02 10:18:14

对不起，我应该更具体，只是一个标准的45度倾斜右上角。 @MLeFevre你是正确的，但我只想右手边倾斜，没有倾斜的文字。对不起，我不够清楚。 – germainelol 2015-04-02 10:20:56

您可以使用倾斜的伪元素来制作元素的倾斜固体背景。这样，文本将不会受到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>

来源

2015-04-02 10:36:08

当我添加'位置：绝对'我失去了黑色背景，你知道为什么吗？正如你从我的代码中可以看到的那样，这个定位用于将图像左上方的文本放置在它的顶部，因为HTML代码实际上是一个'img'和'div'（我将'h3'改为一个'div'） – germainelol 2015-04-02 13:10:12

@germainelol请分享重现您的问题的代码，以便我可以看到如何解决它。 – 2015-04-02 13:24:24

http://jsfiddle.net/31myb1vp/1/这里是一个jsfiddle，对不起，我包括了所有的bootstrap，它需要很长时间才能挑选出我想要的部分，但是顶部是相关的CSS到HTML – germainelol 2015-04-02 14:15:50

我想你想添加一个倾斜的横幅或一个简单的点击区域。我会给出的建议来自亚马逊和谷歌这样的主要网站是如何做到的。它如下所示：

创建一个矢量图像，该图像具有所需的倾斜角度，并覆盖所需div的比例。然后，当您将它作为叠加层添加时，可以将其设置为位置：绝对值，其中z-index大于div中的任何内容。

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

我希望这会有所帮助。

PS：矢量图像的大小很好，所以你不必担心像素化和任何类型的东西。

来源

2015-04-02 13:02:46 user3842346

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

来源

2017-06-15 16:15:43

没有任何解释，为什么你推荐这个特定的解决方案或它是如何工作的，对任何人来说都不清楚这个解决方案是否适合他们。请记住，您不仅仅是回答OP，而且您还在为寻找解决方案时找到答案的所有人解答他们可能遇到的类似问题。 – VDWWD 2017-06-16 13:18:13

为div创建一个倾斜的边

回答

相关问题