如何在CSS中制作半方形背景

Question

是否有可能在纯粹的CSS背景中制作像图像上的半正方形.我知道它可以用图像作为背景来完成,但我需要使用5种不同的颜色,并且将来可能会改变颜色.

Answer 1

如果你的div有固定的大小,你可以使用border来制作两个三角形,如 CSS三角形如何工作？:

div{
  display:inline-block;
  border-top:100px solid red;
  border-right:100px solid grey;
  }

<div></div>

要制作其他尺寸,颜色,您需要调整边框属性:

div {
  display: inline-block;
}
div:nth-child(1) {
  border-right: 100px solid red;
  border-top: 100px solid grey;
}
div:nth-child(2) {
  border-left: 100px solid red;
  border-top: 100px solid grey;
}
div:nth-child(3) {
  border-right: 50px solid red;
  border-top: 100px solid grey;
}
div:nth-child(4) {
  border-right: 100px solid red;
  border-bottom: 50px solid grey;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Answer 2

你也可以试试 linear-gradient

div {
  width: 200px;
  height: 200px;
  background: rgba(248, 80, 50, 1);
  background:linear-gradient(to bottom right,grey 50%,red 50%);
}

<div></div>