本文介绍了如何在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中制作半方形背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-18 12:10
查看更多