如何将 div 着色为一半蓝色，一半黄色？答案

【问题标题】：How to color a div half blue, half yellow?如何将 div 着色为一半蓝色，一半黄色？
【发布时间】：2017-02-05 22:44:45
【问题描述】：

请帮我找到只用一个 div 来实现这个结果的最简单方法？

<div></div>

【问题讨论】：

标签： html css background-color

【解决方案1】：

**Try This**
.container{
                height:120px;
                width:120px;
                border-radius:50%;
                background: linear-gradient(to right, rgb(183,88,206) 50%, rgb(170,61,200) 50%);
                transform: rotateY(0deg) rotate(45deg);
            }

 <html>
    	<head>
    		<title>Test Box</title>
    		<style>
    			.container{
    				height:120px;
    				width:120px;
    				border-radius:50%;
    				background: linear-gradient(to right, rgb(183,88,206) 50%, rgb(170,61,200) 50%);
    				transform: rotateY(0deg) rotate(45deg);
    			}
    		</style>
    	</head>
    	<body>
    		<div class="container">
    		</div>
    	</body>
    </html>

【讨论】：

【解决方案2】：

试试这个代码：

div {
  height: 200px;
  width: 400px;

background: blue; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, blue 50% , yellow 50%); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, blue 50%, yellow 50%); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, blue 50%, yellow 50%); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, blue 50% , yellow 50%); /* Standard syntax */
  }

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

【讨论】：

【解决方案3】：

    #leftHalf {
   background-color: blue;
   width: 50%;
   position: absolute;
   left: 0px;
   height: 100%;
}

#rightHalf {
   background-color: yellow;
   width: 50%;
   position: absolute;
   right: 0px;
   height: 100%;
}

试试上面的 CSS 代码

【讨论】：

你会在哪里应用#Id？
你可以像我们使用的css类一样在div标签中使用这个。
这将无法完成仅使用一个 div 的任务。

【解决方案4】：

给你。

div {
  width: 400px;
  height: 200px;
  background:yellow;
  }

div::after {
  width:50%;
  height:100%;
  content:"";
  background: blue;
  display:inline-block;
}

<div> 
</div>

【讨论】：

有没有办法横向做到这一点？
@LeonCsergity 水平方向更容易，因为默认情况下 div 获取其容器中可用的所有宽度。因此，您只需将每个 div 的高度调整为 50%。

【解决方案5】：

你可以这样做：

Here is the JSFiddle demo

片段示例

 div{
    	width:400px;
    	height:350px;
    	background: linear-gradient(to right, blue 50%, yellow 50%);
    }

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

【讨论】：

【解决方案6】：

html:

<div class="blue_yellow"></div>

css:

.blue_yellow {
background: linear-gradient(to left, blue 50%, yellow 50%);
}

【讨论】：