.box {
  --a: 50px; /* the size of the triangle */
  --g: 10px; /* the gap */
  
  height: 200px;
}
.top {
  background: conic-gradient(from 90deg at 50% 125%, #1f005c, #003298, #005ac6, #007fdc, #00a2d3, #00c4ae, #00e474, #00ff00, #1f005c, #003298, #005ac6, #007fdc, #00a2d3, #00c4ae, #00e474, #00ff00);
  clip-path: polygon(0 0,100% 0,100% calc(100% - var(--a)),calc(50% + var(--a)) calc(100% - var(--a)),50% 100%,calc(50% - var(--a)) calc(100% - var(--a)),0 calc(100% - var(--a)))
}
.bottom {
  background: conic-gradient(from 90deg at 25% -10%, #ff4500, #d3f340, #7bee85, #afeeee, #7bee85);
  margin-top: calc(var(--g) - var(--a));
  clip-path: polygon(0 0,calc(50% - var(--a) - .414*var(--g)) 0,50% calc(var(--a) + .414*var(--g)),calc(50% + var(--a) + .414*var(--g)) 0,100% 0,100% 100%, 0 100%);
}