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

Question

是否可能使用纯CSS来制作像图片中一样的半个正方形背景。 我知道可以使用图像作为背景来实现，但我需要使用 5 种不同的颜色，并且将来可能会更改这些颜色。

- jack wolier

---

你可能会发现这个 css triangle 很有用。 - amdixon

有多种不同的方式可以实现这一点，例如使用多个元素或渐变。我建议谷歌一下，找到最适合您需求的解决方案。 - SubjectCurio

这种设计方法的问题在于，半方形图案作为CSS元素不能在CSS“background”属性中使用。因此，您需要使用CSS定位来放置它。这似乎很麻烦，以避免创建5个图像，也许将来还会创建更多。在这种情况下，您正在为视觉效果创建额外的标记，最好使用标准CSS属性来实现。 - Marc Audet

Answer 1

如果您的div具有固定大小，则可以使用边框创建两个三角形，如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>

- web-tiki

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>

- Akshay

Answer 3

如果您不需要考虑旧浏览器的支持，可以使用transform。

.container {
  position: relative;
  overflow: hidden;
  width: 100px;
}
.square {
  width: 100px;
  height: 100px;
  background-color: #E30606;
}
.overlay {
  width: 171px;
  height: 72px;
  background-color: #D0CBCB;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
}

<div class="container">
  <div class="square">
    <div class="overlay"></div>
  </div>
</div>

http://jsfiddle.net/hT9vP/13/

- Glen