Create a Slanted Edge to a Div

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>

How do I achieve a slanted right-edge div?

Create your div, then overlay an absolutely-positioned, rotated pseudo-element to create the slanted impression.

div {  height: 50px;  width: 300px;  background-color: black;  position: relative;  overflow: hidden;}
div:after {  height: 100%;  width: 100%;  background-color: white;  position: absolute;  content: "";  transform: rotate(45deg);  transform-origin: bottom right;}

<div></div>

CSS: How to add slanted edge to right of div with complete browser cross-compatability?

This should do the trick using borders.

<div id="container">
  <p id="text">Hello</p>
  <div id="slanted"></div>
</div>

#container {
  position: relative;
  height: 200px;
  width: 200px;
  background:url(http://placehold.it/200x200);
}

#text {
  position: absolute;
  bottom: 15px;
  left: 10px;
  z-index: 1;
  margin: 0;
}

#slanted {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0;
  width: 0;
  border-left: 75px solid #dedede;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #dedede;
}

jsfiddle

How to create lower edge of div slanted using html and css?

Here you can see different approaches to your problem. Below I placed an example, you can adjust precise values. I hope that helps.

.slanted {  position: relative;  background: red;  padding: 30px;  box-sizing: border-box;  clip-path: polygon(0 0,100% 0vw,100% 75%,0 100%)}

<div class="slanted">  Content.</div>

Slant Left and Right Side of Div at Slight Angle With CSS

The sequence for this clip-path is top left, top right, bottom right, bottom left.

The percentages are the X,Y of the container that contains the polygon.

Use tools at your disposal. Work smarter, not harder :)

https://bennettfeely.com/clippy/

clip-path: polygon(31% 55%, 100% 55%, 75% 100%, 0% 100%);

slanted div top and bottom CSS

Simply change skewY for .slanted:after to a negative number and adjust the height accordingly (numbers below just an example - adjust to how you want it):

.slanted:after {
    content: "";
    background: red;
    height: 80px;
    transform: skewY(-5deg);
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
}

Updated Fiddle

Create a Slanted Edge to a Div