css - 如何为 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