我想创建一个多色条,如下图所示:
是否可以创建可以实现此目的的 CSS?我已经设法使用以下 CSS 创建颜色渐变:
.gold{
background-color: #faa732;
background-image: -moz-linear-gradient(top, #eab92d, #c79810);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eab92d), to(#c79810));
background-image: -webkit-linear-gradient(top, #eab92d, #c79810);
background-image: -o-linear-gradient(top, #eab92d, #c79810);
background-image: linear-gradient(to bottom, #eab92d, #c79810);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
}
.blue {
background-color: #faa732;
background-image: -moz-linear-gradient(top, #034a96, #0663c7);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#034a96), to(#0663c7));
background-image: -webkit-linear-gradient(top, #034a96, #0663c7);
background-image: -o-linear-gradient(top, #034a96, #0663c7);
background-image: linear-gradient(to bottom, #034a96, #0663c7);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
}
.green {
background-color: #faa732;
background-image: -moz-linear-gradient(top, #0D7626, #0a611e);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0D7626), to(#0a611e));
background-image: -webkit-linear-gradient(top, #0D7626, #0a611e);
background-image: -o-linear-gradient(top, #0D7626, #0a611e);
background-image: linear-gradient(to bottom, #0D7626, #0a611e);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
}
我只是不知道如何使它们像图片中那样彼此相邻出现,以及如何具有不同的百分比宽度(例如,条形的蓝色渐变 50%、绿色渐变 40% 和金色渐变 10%)。