How Do I Achieve A Slanted Right-edge Div?

I have been searching for a few days now for code to make the right edge of a div slant 45 degrees. Here is an image example of what I am particularly attempting to get... There s

Solution 1:

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>