Question

Is this possible: to create DIVs around of current DIV?

For example, some DIV lies in the center (big circle) and other DIVs are around it (stars), like on the picture. Does CSS can achieve such tasks?

Answer 1

Yes ofcourse go through this links.. link1 and link2.

and then set the div‘s by giving postioning 🙂 cheers.

Update: (added only chrome vendor prefix)

HTML:

<div class="parent">
    <div class="star topMid"></div>
    <div class="star top left"></div>
    <div class="star top right"></div>
    <div class="star midLeft"></div>
    <div class="star midRight"></div>
    <div class="star bottom left"></div>
    <div class="star bottom right"></div>
    <div class="star bottomMid"></div>
</div>

CSS:

.parent {
    border-radius: 50%;
    width: 300px;
    height: 300px;
    position: relative;
}
.parent:after {
    content:"";
    border-radius: 50%;
    top: 55px;
    left: 55px;
    right: 55px;
    bottom: 55px;
    position: absolute;
    border: 1px solid red;
}
.star {
    position: absolute;
    width: 0px;
    height: 0px;
    border-width: 20px 20px 20px 20px;
    border-color: transparent transparent green transparent;
    border-style: solid;
}
.star:after {
    content:"";
    position: absolute;
    width: 0px;
    height: 0px;
    border-width: 20px 20px 20px 20px;
    border-color: transparent transparent green transparent;
    border-style: solid;
    -webkit-transform: rotate(180deg);
    top: 7px;
    left: -20px;
}
.top {
    top: 12.5%;
}
.left {
    left: 12.5%;
}
.bottom {
    bottom: 20%;
}
.right {
    right: 12.5%;
}
.topMid {
    top:0px;
    left:50%;
    margin-left:-25px;
}
.bottomMid {
    bottom: 25px;
    left:50%;
    margin-left:-25px;
}
.midLeft {
    top:50%;
    left:5px;
    margin-top:-25px;
}
.midRight {
    top:50%;
    right:5px;
    margin-top:-25px;
}

Working Fiddle