CSS | 弧を描く虹（レインボー）のCSSデザインサンプル

2021-02-032022-01-13CSS デザイン サンプル集,CSS

CSSのborderを利用して作成した虹（レインボー）のデザインです。

See the Pen CSS | Rainbow circle by yochans (@yochans) on CodePen.

HTMLには「container」と虹（レインボー）の要素になる「rainbow」、その中に虹のパーツになるdiv要素を7つ入れてあります。

<div id="container">
	<div class="rainbow">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
	</div>
</div>

虹の移動は「.rainbow」の「top」「left」で調節。
大きさは各パーツの「width」「height」の1000pxの部分を変更すれば可能となっています。

パーツはデフォルト「.rainbow div」が一番外側の色となっています。
「.rainbow div:nth-of-type(2)」が2色目～となります。

#container {
	width: 100%;
	height: 300px;
	background: #000;
	position: relative;
	overflow: hidden;
}

.rainbow{
	position: absolute;
	top: 15%;
	left: 15%;
}

.rainbow div{
	position: absolute;
	top: 0;
	left: 0;
	width: 1000px;
	height: 1000px;
	border: solid 10px #E60012;
	border-radius: 50%;
}

.rainbow div:nth-of-type(2){
	top: 10px;
	left: 10px;
	width: calc(1000px - 20px);
	height: calc(1000px - 20px);
	border-color: #F39800;
}

.rainbow div:nth-of-type(3){
	top: 20px;
	left: 20px;
	width: calc(1000px - 40px);
	height: calc(1000px - 40px);
	border-color: #FFF100;
}

.rainbow div:nth-of-type(4){
	top: 30px;
	left: 30px;
	width: calc(1000px - 60px);
	height: calc(1000px - 60px);
	border-color: #009944;
}

.rainbow div:nth-of-type(5){
	top: 40px;
	left: 40px;
	width: calc(1000px - 80px);
	height: calc(1000px - 80px);
	border-color: #0068B7;
}

.rainbow div:nth-of-type(6){
	top: 50px;
	left: 50px;
	width: calc(1000px - 100px);
	height: calc(1000px - 100px);
	border-color: #1D2088;
}

.rainbow div:nth-of-type(7){
	top: 60px;
	left: 60px;
	width: calc(1000px - 120px);
	height: calc(1000px - 120px);
	border-color: #920783;
}

この虹デザインであれば、ひとつの円に対してグラデーション使えばもっとシンプルに簡単に作成できたのでは？と、完成した後にふと気付いたのですが、それは忘れよう。