Css 更改渐变宽度

下面的代码使用CSS渐变创建对角线。但是我怎样才能使彩色线变薄约2px，而中间的空白变大约7px

body {
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #fff), color-stop(0.25, #fff), color-stop(0.25, #9CC), color-stop(0.5, #9CC), color-stop(0.5, #fff), color-stop(0.75, #fff), color-stop(0.75, #9CC));
background-image: -webkit-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CCb 50%, #fff 50%, #fff 75%, #9CC 75%);
background-image: -moz-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9cc 75%);
background-image: -ms-linear-gradient(right bottom, #fff 0%, #fff 25%, #bbb 25%, #bbb 50%, #fff 50%, #fff 75%, #bbb 75%);
background-image: -o-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9CC 75%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#9CC',GradientType=0 ); / IE6-8 */
background-image: linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9CC 75%);
background-size: 5px 5px;
width:100%;
height:100%;
}

---

您必须将渐变的百分比更改为更小或更大的值，

#fff

=白色，因此范围应该更大<代码>#9CC为蓝色，其范围应较小

body {
    background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #fff), color-stop(0.35, #fff), color-stop(0.35, #9CC), color-stop(0.5, #9CC), color-stop(0.5, #fff), color-stop(0.85, #fff), color-stop(0.85, #9CC));
    background-image: -webkit-linear-gradient(right bottom, #fff 0%, #fff 35%, #9CC 35%, #9CCb 50%, #fff 50%, #fff 85%, #9CC 85%);
    background-image: -moz-linear-gradient(right bottom, #fff 0%, #fff 35%, #9CC 35%, #9CC 50%, #fff 50%, #fff 85%, #9cc 85%);
    background-image: -ms-linear-gradient(right bottom, #fff 0%, #fff 35%, #bbb 35%, #bbb 50%, #fff 50%, #fff 85%, #bbb 85%);
    background-image: -o-linear-gradient(right bottom, #fff 0%, #fff 35%, #9CC 35%, #9CC 50%, #fff 50%, #fff 85%, #9CC 85%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#9CC', GradientType=0);
    / IE6-8 */ background-image: linear-gradient(right bottom, #fff 0%, #fff 35%, #9CC 35%, #9CC 50%, #fff 50%, #fff 85%, #9CC 85%);
    background-size: 5px 5px;
    width:100%;
    height:100%;
}

我将

25%

更改为

35%

，将

75%

更改为

80%

，相应地减小了蓝线的范围和宽度，增加了白线的范围和宽度

---

要自己更改它们，您可能需要使用

您是否考虑过使用jqueryrotate之类的js rotate插件？您可以创建更简单的元素，如hr或div，然后旋转它们。只是一个建议