web-dev-qa-db-ja.com

divを半分青く、半分黄色にする方法は？

1つのdivだけでこの結果を達成する最も簡単な方法を見つけられるように、私を助けてください。

<div></div>

enter image description here

htmlcssbackground-color
8
TSR

あなたはこれを行うことができます：

これはJSFiddleデモです

スニペットの例

 div{
        width:400px;
        height:350px;
        background: linear-gradient(to right, blue 50%, yellow 50%);
    }
<div></div>
36
Ahs N

このコードを試してください：

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>
6
Jainam

どうぞ。

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

div::after {
  width:50%;
  height:100%;
  content:"";
  background: blue;
  display:inline-block;
}
<div> 
</div>
2
WitVault
**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>
0
Suryakant kumar
    #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コードで試してください

0
KajalTiwari

html：

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

css：

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