How to set position of circles in corners of heptagon in CSS

Question

I have a little problem with correct set of position in my little website.

I would like to set all 7 circles in corners of heptagon. I create heptagon shape:

polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);

But i don't know how to place 7 circles in 7 corners of this heptagon.

For better understand look at screen:

http://i.imgur.com/b5J8Qje.jpg

1 corner = 1 cirle in my webpage

Now i create this:

http://allekod.com/hmsol/

Any advices will be good! Sorry for my English, i belive my problem is understable.

Answer 1

First create a parent <div> enclosing all the circles and set its position to relative . After that, specify child <div> for enclosing each circles within the parent as follows:

div.circle1 {
  position:absolute;
  top: 0; /*[Position relative to the parent]*/ 
  left:0; /*[Position relative to the parent]*/ 
}

Set the properties for each div as per the heptagonal alignment so that each corner is occupied by a circle.