I have a disc whose size can change, and some icons arranged around that disc. The icons should always be on the border of the disc, and the intervals between each icon should always stay the same.
Can this be done in pure css without having to compute each icon's position whenever the disc grows or shrinks?
Expected result:
.container:nth-child(1)
{
position: absolute;
top: 20px;
left: 30px;
height: 280px;
width: 280px;
}
.container:nth-child(2)
{
position: absolute;
top: 20px;
right: 30px;
height: 200px;
width: 200px;
}
.container > *
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle
{
height: 90%;
width: 90%;
border-radius: 50%;
border: 1px solid blue;
z-index: 20;
}
.icons
{
height: 100%;
width: 100%;
border: 1px dashed gray;
box-sizing: border-box;
z-index: 10;
}
.icons > *
{
position: absolute;
top: 50%;
left: 50%;
height: 20px;
width: 20px;
margin-top: -10px;
margin-left: -10px;
border: 1px solid red;
}
.container:nth-child(1) span:nth-child(1)
{
transform: rotate(230deg) translate(150px) rotate(-230deg);
}
.container:nth-child(1) span:nth-child(2)
{
transform: rotate(217deg) translate(150px) rotate(-217deg);
}
.container:nth-child(1) span:nth-child(3)
{
transform: rotate(204deg) translate(150px) rotate(-204deg);
}
.container:nth-child(1) span:nth-child(4)
{
transform: rotate(191deg) translate(150px) rotate(-191deg);
}
.container:nth-child(2) span:nth-child(1)
{
transform: rotate(230deg) translate(110px) rotate(-230deg);
}
.container:nth-child(2) span:nth-child(2)
{
transform: rotate(212deg) translate(110px) rotate(-212deg);
}
.container:nth-child(2) span:nth-child(3)
{
transform: rotate(194deg) translate(110px) rotate(-194deg);
}
.container:nth-child(2) span:nth-child(4)
{
transform: rotate(176deg) translate(110px) rotate(-176deg);
}
<div class="container">
<div class="circle"></div>
<div class="icons">
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
</div>
</div>
<div class="container">
<div class="circle"></div>
<div class="icons">
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
</div>
</div>
Without a preprocessor, I believe you'll need a script to achieve this. Here I've used jQuery in order to compute the intervals on hover.
Note
this would also support a dynamic number of
.circle
elements