如何从一侧制作对角线背景图像？

Question

如何制作背景带有一个对角线的图像？
我想用CSS，CSS3或jQuery做，而不是用photoshop。我也需要帮助在对角线上创建边框。

Answer 1

以下是如何在div中放置三角形的方法。这应该可以帮助您入门。

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>