如何创建两个彩色的单格？

Question

我正在尝试用两种颜色创建div（请参阅下面的img），但是我只能做一半的一半。如何用两种不同的颜色创建以下内容？请帮助我

Answer 1

尝试一下：

#x {
	width: 200px;
	height: 0px;
	border-top: 100px solid red;
	border-left: 100px solid green;
}

<div id="x">
</div>

由于我们使用边框来创建div，因此您可能必须相应地放置该分区的内部内容。 例如。

#x {
	width: 200px;
	height: 0px;
	border-top: 100px solid red;
	border-left: 100px solid green;
}

#y {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 15px;
  width: 300px;
  height: 100px;
}

<div id="x">
  <div id="y">
    Hi there! I am the inner content! :)
  </div>
</div>

Answer 2

您可以使用背景渐变来调整角度并根据需要停止：

div {
height: 100px;
background: linear-gradient(60deg, green 0%, green 16%, red 16%);
}

<div></div>

Answer 3

这也许更像是个mm头，但如果您知道div的高度，则可以使用线性渐变来匹配所需的内容。

div {
  height: 225px;
  width: 100%;

  background: #00ff00;
  background: -moz-linear-gradient(40deg, #00ff00 0%, #30ff30 25%, #0000ff 25%, #0000e8 100%);
  background: -webkit-linear-gradient(45deg, #00ff00 0%,#30ff30 25%,#0000ff 25%,#0000e8 100%);
  background: linear-gradient(45deg, #00ff00 0%,#30ff30 25%,#0000ff 25%,#0000e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00', endColorstr='#0000e8',GradientType=1 );
}

<div></div>

Answer 4

您必须使用：before和：after元素才能仅使用一个div来实现此目的，但是如果您可以使用多个元素，则可以这样做：

创建一个包含红色和绿色的外部矩形，并在其上隐藏上溢，以使整个对象看起来像一个矩形。然后在内部可以创建一个红色矩形和一个绿色矩形，但要放置一个变换：在红色矩形上倾斜，以便创建对角线。使用z-index将红色矩形放置在绿色矩形的顶部，这将有助于您实现这一目标。