html - 如何创建两个彩色的单个div？

Question

我正在尝试创建具有两种颜色的 div(请参阅下面的 img)，但我每半只能做 50%。如何用两种不同的颜色创建以下内容？请帮帮我

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>