CSS3 arco iris manual de

html

    <div class="caihong"></div>

css

  .caihong {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow:
      0 0 0 5px inset red,
      0 0 0 10px inset orange,
      0 0 0 15px inset yellow,
      0 0 0 20px inset lime,
      0 0 0 25px inset aqua,
      0 0 0 30px inset blue,
      0 0 0 35px inset magenta;
      clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%)

  }

Referencia Dirección: Clip-path detalles de la propiedad https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path#fill-rule