두 개의 서로 다른 색상이 사진에서 HTML

Question

에서 컨테이너 -이 질문은 명확하게 할 수있는 샘플 개요

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    </div> 
</nav> 

Answer 1

하지만 내가 옳다 경우는 2를 원하는 당신은 특히 WH 각 요소에 대해이의

.container{ 
background-color: red !important; 
} 

같은 클래스 그들 앞에 및 CSS 편집에서 클래스를 참조 할 필요가 다른 색을 가지고 부트 스트랩 사용 도중 넣어 기억 정상적인 설치를 오버라이드 (override) 할 수있는 모든 뒤에 중요한

Answer 2

이미 코멘트에, 당신은 단순히 같은 선형 그라데이션 사용했다!

.back { 
 
    padding: 50px; 
 
    background-image: linear-gradient(red 40%, yellow 30%); 
 
} 
 

 
.container { 
 
    height: 200px; 
 
    width: 100%; 
 
    background: #fff; 
 
}

<div class="back"> 
 
    <div class="container"> 
 
    </div> 
 
</div>

Answer 3

당신을 다음과 같이 과 linear-gradient의 조합을 사용하여이를 달성 할 수 있습니다.

.content { 
 
    height: 100px; 
 
    width: 300px; 
 
    
 
    border-width: 40px; 
 
    border-style: solid; 
 
    border-image: linear-gradient(blue 40%, red 30%) 1 round; 
 
}

<div class="content">Content</div>