<style>
#ppcc {
position: absolute;
display: grid;
place-items: center;
left: calc(50% - 50px);
top: calc(50% - 50px);
width: 100px;
height: 100px;
border: 4px solid teal;
border-radius: 50%;
}
.pp {
--deg: 0;
position: absolute;
display: grid;
place-items: center start;
top: calc(50% - 6px);
right: 50px;
width: 100px;
height: 6px;
background: linear-gradient(to left, red 15%, teal 15%, teal);
transform-origin: 100% 100%;
transform: rotate(var(--deg)) translate(0, -50px);
}
.pp::after {
position: absolute;
content: '';
width: 12px;
height: 12px;
background: teal;
}
</style>
<div id="ppcc"></div>
<script>
const total = 10;
for (let i = 0; i < total; i++) {
const pp = document.createElement('span');
pp.className = 'pp';
pp.style.cssText += `
width: ${Math.floor(Math.random() * 100) + 50}px;
--deg: ${360 / total * i}deg;
`;
ppcc.appendChild(pp);
}
</script>
|