web-dev-qa-db-fra.com

Comment colorer un div mi-bleu, mi-jaune?

S'il vous plaît, aidez-moi à trouver le moyen le plus simple d'obtenir ce résultat avec une seule div.

<div></div>

enter image description here

htmlcssbackground-color
8
TSR

Tu peux le faire:

Voici la démo JSFiddle

Exemple d'extrait 

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

Essayez ce code:

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

Voici.

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%;
}

Essayez avec le code CSS ci-dessus

0
KajalTiwari

html:

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

css:

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