Create a slanted edge to a div [duplicate]

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>

Answer 2

This can be achieved easily using CSS clip-path (and -webkit-clip-path)

Example here

I also found this handy tool to generate the CSS code with minimum fuss.

Answer 3

I think you are trying to add a slant for a banner or a simple click area. The suggestion I would give comes from how the major websites like amazon and google do it. It is as follows:

Create a vector image that has the slant that you want where it covers the proportion of the div that you want. Then when you add it as an overlay you can set it as position:absolute with a z-index greater than anything in the div.

This will greatly reduce the processing and the cached image will load as quickly as css. This will also prevent cross browser issues.

I hope this helps.

PS: Vector images re size nicely so you don't have to worry about pixelation and anything of that sort.