CODEWITHSUNDEEP
css
Vladimir Kishlaly
Vladimir Kishlaly

Reputation: 1942

How to give a Geometric shape to a DIV?

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?

Example of positions

Upvotes: 0

Views: 2066

Answers (3)

Mr_Green
Mr_Green

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)

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

Upvotes: 3

Elbek
Elbek

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

Curtis
Curtis

Reputation: 103428

To achieve such a layout, you can use absolute positioning

Upvotes: 2

Related Questions