how to make background image diagonal from 1 side?

Question

How can I make a background image with one diagonal side?
I want to do it with CSS, CSS3 or jQuery and not with photoshop.I also need help creating the border on the diagonal side.

Answer 1

Here's how you can put a triangle in an div. This should help you get started.

div {
  background-color: red;
  width: 200px;
  height: 200px;
}
div::after {
  content: ' ';
  border-top: 200px solid rgba(0, 0, 0, 0);
  border-right: 50px solid #000;
  width: 0px;
  display: block;
  float: right;
}

<div></div>