为div创建倾斜边 [英] Create a slanted edge to a div

问题描述

我试图创建一个倾斜的div，无处不在，我看到我刚刚发现了如何使用一些种类的边框，这将无法工作，因为div将位于图像的顶部。 p>

所以现在的代码如下使用Bootstrap：

  ; div class =thumbnail> 
< a href =＃> 
< img class =img-responsivesrc =banner.jpg> 
< h3 class =headline-badge>倾斜的div文字< / 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。

效果应类似于：

a href =http://jsfiddle.net/webtiki/yLu1sxmj/> http://jsfiddle.net/webtiki/yLu1sxmj/

谢谢发布这个小提琴，但我需要实际添加文本到div，你的解决方案使得很难这样做的回复建议的评论。倾斜还需要向上倾斜，而不是向下倾斜，我努力做到这一点，而不影响div的左边。

解决方案

您的示例中，我不知道如何在div的顶部添加文本。可以使用倾斜的伪元素来使元素的倾斜的实心背景。这样，文本不会受transform属性的影响。

transform origin属性允许伪元素从右下角倾斜，溢出部分用 overflow：hidden; code>。

伪元素堆积在div内容的后面，带有一个负数 z-index ：

< pre class =snippet-code-css lang-css prettyprint-override> div {position：relative; display：inline-block; padding：1em 5em 1em 1em; overflow：hidden; color：#fff;} div：after {content：''; position：absolute; top：0; left：0;宽度：100％;高度：100％;背景：＃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文字< / div>< div>倾斜的div文字< br />在几行上< br />另一行< / div>< div>更宽斜的div文本，其中包含更多文字< / div>  

Im trying to create a slanted div, and everywhere I have looked I have just found how to do it using a border of some sorts, which will not work because the div will be places over the top of an image.

So the code at the moment is as follows using Bootstrap:

<div class="thumbnail">
    <a href="#">
        <img class="img-responsive" src="banner.jpg">
        <h3 class="headline-badge">slanted div text</h3>
    </a>
</div>

And this is the relevant 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;
}

So I want to create a slant towards the top right. I tried using a border with little or no success, and whenever I tried to make the border transparent it wouldn't display the border.

Does anyone have any ideas about how to create this using CSS? I believe it should also be responsive which is a major issue as the slant cannot just be a fixed height/width.

The slant should be around 45 degrees, and only on the right hand side of the div. The text shouldn't be effected by the slant.

The effect should be similar to this:

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

Thanks for posting this fiddle, but I need to actually add text to the div, and your solution makes it difficult to do this as the comments in reply suggest. The slant would also need to be slanting upwards, not downwards, and I struggled to do this without effecting the left of the div. With your example I couldn't figure out how to add text on top of the div though I'm afraid.

解决方案

You can use a skewed pseudo element to make the slanted solid background of your element. This way, the text won't be affected by the transform property.

The transform origin property allows the pseudo element to be skewed from the right bottom corner and the overflowwing parts are hidden with overflow:hidden;.

The pseudo element is stacked behind the content of the div with a negative 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>

这篇关于为div创建倾斜边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！