CSS design - rainbow

Question

I want to create a rainbow using only CSS only. Below is an image of what is required.

Answer 1

I thought i'd add just some of the rainbow designs found while going through codepen for your inspiration (note I did not make these, it's more for reference than anything)

option 1

@import "http://fonts.googleapis.com/css?family=Racing+Sans+One";
  
@-moz-keyframes spin {
    from {
      -moz-transform: rotate(0deg);
    }

    to {
      -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

#rainbow {
  height: 290px;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  width: 580px;
  -moz-transition: height 500ms ease-in-out;
  -webkit-transition: height 500ms ease-in-out;
  transition: height 500ms ease-in-out;
}

#rainbow.reveal {
  height: 600px;
}

#rainbow li {
  position: absolute;
  height: 100%;
  text-indent: -9999px;
  opacity: 0.8;
}

#rainbow .ribbon {
  border-radius: 50%;
  border-style: solid;
  border-width: 40px;
  position: absolute;
  left: inherit;
  top: inherit;
  -moz-animation: spin;
  -moz-animation-duration: 2s;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: alternate;
  -moz-animation-fill-mode: forwards;
  -webkit-animation: spin;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  animation: spin;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

#rainbow .red {
  left: 0;
  top: 0;
}

#rainbow .red .ribbon {
  border-color: red;
  height: 500px;
  width: 500px;
  clip: rect(0px, 580px, 290px, 0px);
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

#rainbow .orange {
  left: 20px;
  top: 20px;
}

#rainbow .orange .ribbon {
  border-color: orange;
  height: 420px;
  width: 420px;
  clip: rect(0px, 500px, 250px, 0px);
  -moz-animation-delay: 1s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

#rainbow .yellow {
  left: 40px;
  top: 40px;
}

#rainbow .yellow .ribbon {
  border-color: yellow;
  height: 340px;
  width: 340px;
  clip: rect(0px, 420px, 210px, 0px);
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

#rainbow .green {
  left: 60px;
  top: 60px;
}

#rainbow .green .ribbon {
  border-color: green;
  height: 260px;
  width: 260px;
  clip: rect(0px, 340px, 170px, 0px);
  -moz-animation-delay: 3s;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

#rainbow .blue {
  left: 80px;
  top: 80px;
}

#rainbow .blue .ribbon {
  border-color: blue;
  height: 180px;
  width: 180px;
  clip: rect(0px, 260px, 130px, 0px);
  -moz-animation-delay: 4s;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

#rainbow .indigo {
  left: 100px;
  top: 100px;
}

#rainbow .indigo .ribbon {
  border-color: indigo;
  height: 100px;
  width: 100px;
  clip: rect(0px, 180px, 90px, 0px);
  -moz-animation-delay: 5s;
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

#rainbow .violet {
  left: 120px;
  top: 120px;
}

#rainbow .violet .ribbon {
  border-color: violet;
  height: 20px;
  width: 20px;
  clip: rect(0px, 100px, 50px, 0px);
  -moz-animation-delay: 6s;
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}

.cta {
  cursor: pointer;
  color: #622AF0;
  font-family: 'Racing Sans One', cursive;
  font-size: 18px;
  display: block;
  text-align: center;
  margin-bottom: 5px;
}

body {
  background: #DFFAFF;
}

  

    Red
  
  

    Orange
  
  

    Yellow
  
  

    Green
  
  

    Blue
  
  

    Indigo
  
  

    Violet
  

option 2

body {
			background-color: #A7BACB;
			margin: 0;
			padding: 0;
		}
		
		html {
			position: relative;
			height: 100%;
			background: #F9FEFF;
		}
		.rainbow {
			width: 500px;
			height: 240px;
			margin: 20% auto 0 auto;
			position: absolute;
			left: 50%;
			margin-left: -250px;
			bottom:0;
		}
		.rainbow p {
			text-indent: -9000px;
			margin: 0;
			position: absolute;
			bottom: 0;
			width: 100%;
			-webkit-border-top-left-radius: 600px 560px;
			-webkit-border-top-right-radius: 600px 560px;
			-moz-border-radius-topleft: 600px 560px;
			-moz-border-radius-topright: 600px 560px;
		}
		.rainbow p:nth-child(1),
		.rainbow .r {
			background-color: #FF0000; /* red */
			height: 240px;
			width: 500px;
		}
		.rainbow p:nth-child(2),
		.rainbow .o {	
			background-color: #FF9900; /* orange */
			height: 220px;
			width: 460px;
			left: 20px;
		}
		.rainbow p:nth-child(3),
		.rainbow .y {
			background-color: #FFFF00; /* yellow */
			height: 200px;
			width: 420px;
			left: 40px;
		}
		.rainbow p:nth-child(4),
		.rainbow .g {
				   background-color: #2ECE0C;/* green */
				height: 180px;
				width: 380px;
				left: 60px;
		}
		.rainbow p:nth-child(5),
		.rainbow .b {
				background-color: #0000FF; /* blue */
				height: 160px;
				width: 340px;
				left: 80px;
		}
		.rainbow p:nth-child(6),
		.rainbow .i {
				   background-color: #6600FF; /* indigo */
				height: 140px;
				width: 300px;
				left: 100px;
		}
		.rainbow p:nth-child(7),
		.rainbow .v {
				  background-color: #8B00FF; /* violet */
				height: 120px;
				width: 260px;
				left: 120px;
		}
		.rainbow p:nth-last-of-type(1),
		.rainbow p:last-child {
				background-color: #F9FEFF;
				height: 100px;
				width: 220px;
				left: 140px;
		}

		   
red
		   
orange
		   
yellow
		   
green
		   
blue
		   
indigo
		   
violet
		   
the end
	

option 3 (box shadow idea)

div {
  width: 50%;
  margin: 40px auto;
  text-align: center;
}
.rainbow {
  background-color: #000;
  display: block;
  font-family: Georgia;
  font-size: 14px;
  padding: 80px;
  margin-top: 160px;
  border-radius: 80px;
  box-shadow: 
    0 0 0 20px violet,
    0 0 0 40px indigo,
    0 0 0 60px blue,
    0 0 0 80px green,
    0 0 0 100px yellow,
    0 0 0 120px orange,
    0 0 0 140px red;
  width: 0;
}

option 4 (using border colors)

body{
  background: #9ecdef;
}
.rainbow {
  width: 600px;
  height: 300px;
  overflow: hidden;		
  position: absolute;
  top: calc(50% - 150px);
  left: calc(50% - 300px);
}
.border{
  border-style: solid;
  border-width: 10px;
  border-left-color: transparent;	
  border-bottom-color: transparent;
  border-radius: 50%;
}
.red {
  width: calc(100% - 20px);	
  height: calc(200% - 20px);
  border-top-color: #f00;	
  border-right-color: #f00;
  animation: rotate 2s ease-in-out;
  -webkit-animation: rotate 2s ease-in-out;
  transform: rotate(-45deg);	
  -webkit-transform: rotate(-45deg);
}
.size{
  width: calc(100% - 20px);
  height: calc(100% - 20px);
}
.orange{
  border-top-color: #ff4500;
  border-right-color: #ff4500;
}
.yellow{
  border-top-color: #ff0;
  border-right-color: #ff0;
}
.green{
  border-top-color: #0f0;
  border-right-color: #0f0;
}
.blue{
  border-top-color: #00f;
  border-right-color: #00f;
}
.cyan{
  border-top-color: #0ff;
  border-right-color: #0ff;
}
.purple{
  border-top-color: #8a2be2;
  border-right-color: #8a2be2;
}
@keyframes rotate {	
  from{-webkit-transform: rotate(-225deg);}
  to{-webkit-transform: rotate(-45deg);}
}

@-webkit-keyframes rotate {
  from{-webkit-transform: rotate(-225deg);}
  to{-webkit-transform: rotate(-45deg);}
}