如何在CSS中制作半方形背景 [英] How to make half-square background in css

问题描述

是否有可能在纯CSS背景中制作半方形(如图像上所示). 我知道可以使用图像作为背景，但是我需要使用5种不同的颜色，也许将来可以更改颜色.

Is it possible to make in pure css background for half square like on the image. I know that it can be done with an image as background, but I need to use 5 different colours, and maybe in future the colours can be changed.

推荐答案

如果div具有固定大小，则可以使用边框制作两个三角形，如

If your divs have fixed sizes, you can use borders to make two triangles as described in How do CSS triangles work?:

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

<div></div>

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

To make other sizes, colors, you need to tweak the border properties :

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>

这篇关于如何在CSS中制作半方形背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！