如何为DIV提供几何形状？

Question

这可能：在当前DIV周围创建DIV吗？

例如，有些DIV位于中心（大圆圈），其他DIV位于它周围（星星），就像在图片上一样。 CSS可以实现这样的任务吗？

Answer 1

是的，请查看此链接.. link1和link2。

然后通过postioning :)欢呼来设置div。

更新 :( 仅添加了Chrome供应商前缀）

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

Answer 2

要实现此类布局，您可以使用absolute positioning

Answer 3

Guys已经用绝对定位说出了正确答案。但这是我建议的提示：

    <div class="bigDiv">
         <div class="smallDive">

         </div>
          <div class="smallDive">

         </div>
         <div class="smallDive">

         </div>
         //...
    </div>

    .bigDive{
       position:relative;
       //...
     }
     .smallDiv{
       position:absolute;
       //...
     }

因此，在这种情况下，内部smallDive的位置将根据大潜水位置计算，而不是根据显示器的角落计算。