smooth lines in diagonal gradient and alternatives

Question

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

I want to have such gradient as background for whole web page. But lines between colored sections are not smooth in most browsers. There are small 1px breaks, shelves (you understand). Is it possible to get this lines smooth?

As alternative, skewed div's technique gives smooth lines.

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

I think this fits better. Further I want to d ynamically change the width of this sections on hover and fill them by some content. Is it completely bad idea to use gradients for this "transitions-animation" purpose?

Answer 1

Well, I've tried to make a repeated gradient as a background, but I think it would be really hard to control the size of a particular section of the background to extend it once you want to show the content, I think you will have more control if you stick to separated elements that you can change on hover.

Also, is there a particular reason for the div.sector to have display:inline;? It's already floated to the left, so it's behaving as a block element, no need to declare it as inline as well. I hope this helps, and let me know if I did not understood you correctly.