2017-11-19 1 views
0

친애하는 커뮤니티이 유형의 색상이 호출되는 방법과이를 달성하는 방법을 찾으려고합니다 (첨부 된 이미지 - 다각형 탐색 모음 참조). 아마 CSS 또는 자바 스크립트가 필요하지만 그것을 검색하는 방법을 모르겠습니다. 누군가 나를 도울 수 있습니까? 많은 색상의 탐색 모음에 대해 페이드 색상 혼합을 어떻게 달성합니까?

polygon navigation bar

+0

대기, 당신은 그림에서와 같은 색상을 결합해야? – dean

+1

검색어는 "CSS 그라데이션"입니다. –

답변

0

어쩌면 당신은 background-blend-mode 속성을 사용할 필요가 다음 코드를 확인 사전에 감사합니다.

.nav{ 
 
height: 50px; 
 
width: 100%; 
 
background-image: linear-gradient(to right, #0000FF, #FF0000); 
 
background-image: -o-linear-gradient(right, #0000FF, #FF0000); 
 
background-image: -moz-linear-gradient(right, #0000FF, #FF0000); 
 
background-image: -webkit-linear-gradient(left, #0000FF, #FF0000); 
 
background-blend-mode: multiply; 
 
} 
 

 
.nav ul li{ 
 
list-style-type: none; 
 
float: left; 
 
padding: 15px 20px; 
 
color: #FFFFFF; 
 
font-family: 'Arial'; 
 
}
<div class="nav"> 
 
    <ul> 
 
    <li>Menu 1</li> 
 
    <li>Menu 2</li> 
 
    <li>Menu 3</li> 
 
    <li>Menu 4</li> 
 
    <li>Menu 5</li> 
 
    </ul> 
 
</div

관련 문제