Positionnement des éléments le long de la bordure visible d'une div parente

Question

Curieusement, je n'ai rien trouvé à ce sujet ; j'ai pensé que le problème était assez courant !

Ce que j'ai, c'est une div parent avec une div border-radius pour rendre le div circulaire. Dans cette div, j'ai plusieurs divs enfants que j'aimerais voir s'imbriquer :

• Positionné directement sur les bordures circulaires visibles (par opposition à la "bordure" carrée invisible qui entoure la div ). this jsFiddle J'espère que cela clarifiera ce que j'essaie de dire ici).
• En outre, j'aimerais pouvoir positionner précisément les divs enfants le long de différents points de cette bordure (quelque chose comme "positionner childDiv1 à la position 90deg [ou 105deg, 120deg, 135deg, etc.] de la div parent circulaire" au lieu de devoir utiliser top y left ou assigner des valeurs absolues de pixels ou quelque chose comme ça).

Je suis encore un amateur qui essaie de comprendre le positionnement CSS, donc je ne suis même pas sûr que tout cela soit possible, haha. J'attends avec impatience toute contribution de votre part !

Answer 1

Vous pouvez utiliser css3 transformer y transform-origin pour y parvenir

<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/

Answer 2

http://jsfiddle.net/zSdsg/15/ (mis à jour pour montrer que top:0 ne dépasse pas le cercle).

Ou http://jsfiddle.net/zSdsg/17/ qui a l'air beaucoup plus cool :}

EDITAR : Je crois que j'ai mal compris votre question. Je mettrai à jour ou supprimerai ma réponse en fonction de... ma réponse.