배경색 50 % 1 색 50 % 다른 색

Question

div 안에는 처음 50 %의 너비에 배경색을 넣고 다른 색에는 너비의 50 %를 넣고 싶습니다. 이상적으로 크기 조정시 인공물이나 지저분한 효과없이 완벽하게 조정하고 싶습니다.

변경하기 어려운 기존 HTML을 사용하면서 코드 내에서 다른 div를 사용하지 않는 것이 이상적입니다. 실제로 100 % CSS 솔루션을 찾고 있습니다.

는

나는 이런 식으로 뭔가를 찾고 있어요 (I 불꽃 놀이와 함께이를 조롱) :

Answer 1

과 같은 것을 사용할 수 있지만 지원해야하는 브라우저를 기반으로하면 모든 브라우저에서 작동하지 않을 수 있습니다.

background: linear-gradient(to left, #ff0000 50%, #0000ff 50%); 

Answer 2

당신은 다음과 같이 그라데이션을 사용할 수 http://jsfiddle.net/F3M5e/

관련 코드 :

background: #1e5799; /* Old browsers */ 
background: -moz-linear-gradient(top, #1e5799 0%, #1e5799 50%, #000000 50%, #000000 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#1e5799), color-stop(50%,#000000), color-stop(100%,#000000)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #1e5799 0%,#1e5799 50%,#000000 50%,#000000 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #1e5799 0%,#1e5799 50%,#000000 50%,#000000 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #1e5799 0%,#1e5799 50%,#000000 50%,#000000 100%); /* IE10+ */ 
background: linear-gradient(to bottom, #1e5799 0%,#1e5799 50%,#000000 50%,#000000 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#000000',GradientType=0); /* IE6-9 */ 

편집 : 가로 방향 기울기 http://jsfiddle.net/F3M5e/1/

Answer 3

: before 및 : after 의사 요소를 사용할 수 있습니다.

#somediv { 
    width:50%; 
    height:100px; 
    position: relative; 
} 

#somediv:after, #somediv:before { 
    content:' '; 
    position: absolute; 
    width:50%; 
    height:100%; 
    z-index: -1; 
} 

#somediv:after {left: 0px; background: #F00; } 
#somediv:before {right: 0px; background: #00F;} 

편집 : 어디 그라디언트가되지 않도록 http://plnkr.co/edit/hm9bHNuuzh2EK4zwn3nr?p=preview

도 IE8에서 작동처럼.

귀하의 필요에 맞게 조정해야하는지 알려주세요.

Answer 4

http://jsfiddle.net/Rn8PZ/

div { 
    background: -webkit-linear-gradient(right, tan 50%, green 50%); 
    background: -o-linear-gradient(right, tan 50%, green 50%); 
    background: -moz-linear-gradient(right, tan 50%, green 50%); 
    background: linear-gradient(to right, tan 50%, green 50%); 
}