대각선 그라데이션 및 대체품의 부드러운 선

Question

http://www.jsfiddle.net/3vjaxf3p/ 

전체 웹 페이지의 배경처럼 그라데이션을 사용하고 싶습니다. 그러나 컬러 섹션 사이의 선은 대부분의 브라우저에서 부드럽 지 않습니다. 작은 1px 나누기, 선반이 있습니다 (이해할 수 있음). 이 선을 부드럽게 할 수 있습니까?

대안으로 비뚤어진 div의 기법은 부드러운 선을 제공합니다.

http://www.jsfiddle.net/6bujer9k/

HTML :

<div class="mainContainer"> 
    <div class="sector firstSector"></div> 
    <div class="sector secondSector"></div> 
    <div class="sector thirdSector"></div> 
    <div class="sector fourthSector"></div> 
    <div class="sector fifthSector"></div> 
    <div class="sector sixthSector"></div> 
    <div class="sector seventhSector"></div> 
    <div class="sector eigthSector"></div> 
    <div class="sector ninthSector"></div> 
</div> 

CSS :

body { 
    overflow: hidden; 
} 

div.mainContainer { 
    width: 150%; 
    height: 780px; 
    position: absolute; 
    top: -80px; 
    left: -300px; 
} 

div.sector { 
    display: inline; 
    float: left; 
    height: 100%; 
    -ms-transform: skewX(-45deg); 
    -webkit-transform: skewX(-45deg); 
    transform: skewX(-45deg); 
} 

div.firstSector { 
    width: 9.75%; 
    background-color: #94C4FF; 
} 

div.secondSector { 
    width: 11.5%; 
    background-color: #FFE6BE; 
} 

div.thirdSector { 
    width: 11.5%; 
    background-color: #94C4FF; 
} 

div.fourthSector { 
    width: 11.5%; 
    background-color: #FFE6BE; 
} 

div.fifthSector { 
    width: 11.5%; 
    background-color: #94C4FF; 
} 

div.sixthSector { 
    width: 11.5%; 
    background-color: #FFE6BE; 
} 

div.seventhSector { 
    width: 11.5%; 
    background-color: #94C4FF; 
} 

div.eigthSector { 
    width: 11.5%; 
    background-color: #FFE6BE; 
} 

div.ninthSector { 
    width: 9.75%; 
    background-color: #94C4FF; 
} 

나는이 더 잘 맞는 것 같아요. 더 나아가 나는 호버에서이 섹션의 너비를 ynamically 변경하고 일부 내용으로 채우기를 원합니다. 이 "전환 애니메이션"목적을 위해 그라디언트를 사용하는 것은 완전히 나쁜 생각입니까?

Answer 1

음, 배경으로 그라디언트를 반복 해 보았습니다.하지만 배경의 특정 부분의 크기를 제어하여 내용을 표시하고 싶다면이 부분을 확장하는 것이 정말 어려울 것이라고 생각합니다. 마우스를 올리면 변경할 수있는 분리 된 요소를 고수하면 더 많은 제어가 가능할 것이라고 생각합니다.

또한 div.sector에 display : inline;이있는 특별한 이유가 있습니까? 이미 왼쪽으로 뜬 상태이므로 블록 요소로 작동하므로 인라인으로 선언 할 필요가 없습니다. 이 정보가 도움이 되었기를 바랍니다. 그리고 내가 올바르게 이해하지 못했다면 알려주세요.