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%)
}
Reference Address: Clip-path property details https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path#fill-rule