Reputation: 1942
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?
Upvotes: 0
Views: 2066
Reputation: 41872
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)
<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>
.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;
}
Upvotes: 3
Reputation: 3494
Guys already said correct answer with absolute positioning. But here is the tip I would suggest:
<div class="bigDiv">
<div class="smallDive">
</div>
<div class="smallDive">
</div>
<div class="smallDive">
</div>
//...
</div>
.bigDive{
position:relative;
//...
}
.smallDiv{
position:absolute;
//...
}
So in that case inner smallDive's position will be calculated based on big dives positon, NOT according to display's corners.
Upvotes: 1