如何为一个半蓝色半黄色的颜色着色？

Question

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

<div></div> 

Answer 1

你可以这样做：

Here is the JSFiddle demo

摘录例

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

<div></div>

Answer 2

HTML：

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

CSS：

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

Answer 3

试试这个代码：

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 */ 
 
    }

<div></div>

Answer 4

在这里你去。

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

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

<div> 
 
</div>

Answer 5

#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代码