Create a slanted edge to a div

Question

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.

Answer 1

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>