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;？它已经浮动到左侧，因此它表现为块元素，不需要将其声明为内联。我希望这有帮助，如果我没有正确理解你，请告诉我。

对角线梯度和替代品的平滑线条

1 个答案: