javascriptで指定色を等分したグラデーションの自動作成
分かりづらいタイトルなので実際のものを こんな感じ 実際のコードは以下 *枠線は除いてある <div style="background: linear-gradient(to right , pink 0 , pink 33.32% , palegreen 33.33% , palegreen 66.65% , lightskyblue 66.66% , lightskyblue 100%);"> 指定色 [ pink, palegreen, lightskyblue ] で等分したグラデーションになっている これをjavascriptで自動作成するには function gradientGen(colors) { var texts = ['to right']; var ratio = 100 / colors.length; for (var i = 0; i < colors.length; i++) { if (i != 0) { texts.push(colors[i-1] + ' ' + ((ratio * i)-0.01) + '%'); } texts.push(colors[i] + ' ' + ratio * i + '%'); } texts.push(colors[colors.length-1] + ' 100%') return 'linear-gradient(' + texts.join(',') + ')'; } var colorList = ['pink','palegreen','lightskyblue']; gradientGen(colorList) このようになる +ばかりで汚いコードだが、順に説明 textsの初期化では方向を入れており、これを 'to left' にすれば右から左に &