<div></div>

DIV {
  --steps: 9;
  --hue-step: calc(360deg / var(--steps));
  --line-width: 1rem;
  
  background: repeating-linear-gradient(45deg,
    hsl(calc(var(--hue-step) * 7), 100%, 63%), 
    hsl(calc(var(--hue-step) * 7), 100%, 63%) var(--line-width),
    
    hsl(var(--hue-step), 100%, 63%) 0, 
    hsl(var(--hue-step), 100%, 63%) calc(var(--line-width) * 2),
    
    hsl(calc(var(--hue-step) * 6), 100%, 63%) 0,
    hsl(calc(var(--hue-step) * 6), 100%, 63%) calc(var(--line-width) * 3),
    
    hsl(calc(var(--hue-step) * 3), 100%, 63%) 0,
    hsl(calc(var(--hue-step) * 3), 100%, 63%) calc(var(--line-width) * 4),
    
    hsl(calc(var(--hue-step) * 8), 100%, 63%) 0,
    hsl(calc(var(--hue-step) * 8), 100%, 63%) calc(var(--line-width) * 5),
    
    hsl(calc(var(--hue-step) * 5), 100%, 63%) 0,
    hsl(calc(var(--hue-step) * 5), 100%, 63%) calc(var(--line-width) * 6),
    
    hsl(calc(var(--hue-step) * 2), 100%, 63%) 0,
    hsl(calc(var(--hue-step) * 2), 100%, 63%) calc(var(--line-width) * 7),
    
    hsl(0, 100%, 63%) 0,
    hsl(0, 100%, 63%) calc(var(--line-width) * 8),
    
    hsl(calc(var(--hue-step) * 4), 100%, 63%) 0,
    hsl(calc(var(--hue-step) * 4), 100%, 63%) calc(var(--line-width) * 9)
  );
  
}


// Helpers
BODY {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Trebuchet MS, Arial, sans-serif;
  line-height: 1.3;
}

DIV {
  position: relative;
  min-width: 300px;
  max-width: 400px;
  height: 200px;
  outline: 2px solid #DDD;
}