Create a slanted edge to a 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.

Answers


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>

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.


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

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.


The problem with the accepted answer is that it doesn't work when you have an image as the background of the parent element. I used an inline svg background instead.

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;
   }

Note: You may have to play around with the svg and height and width a little. The accepted answer should work for most cases. It didn't work for me because I had a parent element that had an image background.

Here are some resources on the svg tag:

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


Need Your Help

Setting tableView header's height in Swift

ios swift uitableview uiview

I am trying to set the height of a view that is on top of my prototype cell in a table view controller. I use IB to set it's height (size inspector) and set it to 61 like so (the green view is the '

Displaying the constraints in a table

sql oracle constraints sqlplus

Hello I am trying to display the constraints in one of my tables but for some reason I get the message no rows selected. Noted below is the table I have created.