如何为DIV提供几何形状?

时间:2012-09-27 15:53:07

标签: css

这可能:在当前DIV周围创建DIV吗?

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

Example of positions

3 个答案:

答案 0 :(得分:3)

是的,请查看此链接.. link1link2

然后通过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

答案 1 :(得分:2)

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

答案 2 :(得分:1)

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

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

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

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

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

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

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