p.one Rainbows are fun
p.two Rainbows with hard edges
p.three Rainbows with hard edges and rounded corners

$rainbow-list: (red, orange, yellow, green, blue, indigo, violet);

// This function takes a list (an Array, in any other language) and
// outputs a conical gradient where each colour value in the list
// takes up and equal band of colour.
@function cone($list) {
  // How many bands of colour we need
  $list-length: length($list);
  // How wide each band is, in degrees
  $band-width: 360deg / $list-length;
  $output: ();
  // Index is the count
  @for $index from 1 through $list-length {
    // The first band goes from zero to $band-width and has a slightly different syntax
    @if $index == 1 {
      $output: append($output, nth($list, $index) ($index * $band-width), comma);
    } @else {
      $output: append($output, nth($list, $index) (($index - 1) * $band-width) ($index * $band-width), comma);
    }
  }
  @return $output;
}  
  
body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 2em;
  line-height: 1.6;
  @media (min-width: 60em) {
    display: flex;
  }
}

p {
  align-items: center; 
  aspect-ratio: 1;
  display: flex;
  flex: 1;
  font-weight: bold;
  justify-content: center;
  margin: 1em;
  padding: 1em;
  text-align: center;
  text-shadow: 0 0 .2em white;
  
  &.one {
    background: conic-gradient($rainbow-list, red);
  }

  &.two {
    background: conic-gradient(cone($rainbow-list));
  }

  &.three {
    background: conic-gradient(cone($rainbow-list));
    border-radius: 50%;
  }
  
  // Just ignore this
  &.four {
    background: conic-gradient(red 270deg, transparent 270deg);
    border-radius: 50%;
  }
}