如何在css中制作半方形背景答案

【问题标题】：How to make half-square background in css如何在css中制作半方形背景
【发布时间】：2018-11-20 17:00:09
【问题描述】：

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

【问题讨论】：

可能会觉得这个css triangle很有用
有several different 方法可以做到这一点，例如使用多个元素或渐变。我建议使用谷歌搜索以找到最能满足您需求的解决方案。
这种设计方法的问题是半方形主题作为 CSS 元素不能在 CSS background 属性中使用。所以你需要使用 CSS 定位来放置它。避免创建 5 个图像并且将来可能会创建更多图像似乎很麻烦。在这种情况下，您正在为视觉效果创建额外的标记，最好使用标准 CSS 属性来实现。

【解决方案1】：

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

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

&lt;div&gt;&lt;/div&gt;

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

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>

【讨论】：

【解决方案2】：

你也可以试试linear-gradient

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

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

如果您不需要担心旧的浏览器支持，您可以使用转换。

.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/

【讨论】：