Question

I’ve not been able to find anything on this topic, oddly; I figured it’d be a pretty common issue!

What I’ve got is a parent div with a border-radius to make the div circular. Nested in that div, I’ve got several child divs that I would like:

• Positioned directly on the visible circular borders (as opposed to the invisible square “border” that surrounds the div — this jsFiddle hopefully will clarify what I’m trying to say here).
• In addition, I’d like to be able to precisely position the child divs along different points of this border (so, something like “position childDiv1 at the 90deg position [or the 105deg position, 120deg, 135deg, etc.] of the circular parent div” instead of having to use top and left or assign absolute pixel values or something).

Still an amateur trying to figure out CSS positioning, so I’m not even sure if any of this is possible, haha. Looking forward to any input you guys can provide!

Answer 1

You can use css3 transform and transform-origin to achieve this

<div id="parent">
    <div class="child" id="child1"></div>
    <div class="child" id="child2"></div>
    <div class="child" id="child3"></div>
    <div class="child" id="child4"></div>
</div>

#parent {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px dotted #000;
    border-radius: 150px;
}

.child {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: #666;
    left: 135px;
}
#child1{
    transform: rotate(90deg);
    transform-origin:50% 150px;
}
#child2{
    transform: rotate(105deg);
    transform-origin:50% 150px;
}
#child3{
    transform: rotate(120deg);
    transform-origin:50% 150px;
}
#child4{
    transform: rotate(135deg);
    transform-origin:50% 150px;
}

http://jsfiddle.net/zSdsg/20/