Create a slanted edge to a div

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>

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.

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.