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

Question

是否可以像图像上那样在纯 css 背景中制作半个正方形。我知道它可以用图像作为背景来完成，但我需要使用 5 种不同的颜色，也许将来可以更改颜色。

Answer 1

如果您的 div 具有固定大小，您可以使用边框来制作两个三 Angular 形，如 How do CSS triangles work? 中所述。 :

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>