css - 如何为 DIV 赋予几何形状？

Question

这是否可能：围绕当前 DIV 创建 DIV？

例如，一些 DIV 位于中心（大圆圈），而其他 DIV 在其周围（星形），如图所示。CSS能完成这样的任务吗？

Answer 1

是的，当然要通过这个链接.. link1和link2。

然后div通过给出定位来设置's :)欢呼。

更新：（仅添加了 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;
}

工作小提琴

Answer 2

要实现这样的布局，可以使用绝对定位

Answer 3

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

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

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

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

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

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

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