Question

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

<div></div>

Answer 1

你可以这样做：

Here is the JSFiddle demo

代码段示例

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

<div></div>

Answer 2

试试这段代码：

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

Answer 3

你走了。

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

<div> 
</div>

Answer 4

HTML：

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

的CSS：

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

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

Answer 6

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

如何给div半蓝，半黄？

6 个答案: