.palette{--g:10px;--s:50px;display:inline-block;height:200px;overflow:hidden;position:relative;width:200px}.palette>*{border:var(--s) solid var(--c,red);border-radius:50%;bottom:0;clip-path:polygon(calc(50% + var(--g)/2) 50%,calc(50% + var(--g)/2) 0,100% 0,100% calc(0% - var(--g)/2),50% calc(50% - var(--g)/2));left:0;position:absolute;right:0;top:0}.color1{transform:rotate(45deg);--c:blue}.color2{transform:rotate(90deg);--c:orange}.color3{transform:rotate(135deg);--c:green}.color4{transform:rotate(180deg);--c:purple}.color5{transform:rotate(-45deg);--c:orange}.color6{transform:rotate(-90deg);--c:#add8e6}.color7{transform:rotate(-135deg);--c:pink}