对角线渐变和替代方案中的流畅线条

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

我觉得这更适合的。此外，我想动态更改这些部分的宽度并将其填充一些内容。为此“转换动画”目的使用渐变完全不好吗？

Answer 1

那么，我试着做一个重复渐变作为背景，但我认为这将是很难控制的背景的特定部分的大小来扩展它，一旦你想显示的内容，我如果你坚持分开的元素，你可以在悬停时改变，你会觉得你会有更多的控制权。

另外，是否有一个特殊原因的div.sector有显示：inline;？它已经浮动到左侧，因此它表现为块元素，不需要将它声明为内联。 我希望这会有所帮助，如果我没有正确理解你，请告诉我。