您可以使用此代码来实现对角线
.childDiv {
border:1px solid gray;
width:100px;
height:100px;
position:relative;
}
.childDiv:after {
position:absolute;
content:"";
border-top:1px solid black;
width:141px;
transform: rotate(45deg);
transform-origin: 0% 0%;
}
这将为您提供从左上角到右下角的对角线。您可以将其再旋转 90°,以获得从右上角到左下角的对角线。
width:141px
是由于毕达哥拉斯定理。我把边设为 100px,因此斜边(在我们的例子中是对角线)必须是 100√2,大约是 141。
您应该将占星图分成 4 个 div,如下所示:
您可以将上述代码应用于这 4 个 div(标有蓝色)并根据需要获取对角线。此外,您将需要从某些 div 中删除某些边框。看到这个:
要让 div 组成一个正方形,您总共需要 6 个 div。其中 4 个将是上图中标记的 div,2 个将是父 div,每个 div 将包含 2 个 div。
每个父 div 将在每行中包含 2 个 div。将代码想象为:
<div id='parentDiv1'>
<div class='div1 childDiv'></div>
<div class='div2 childDiv'></div>
</div>
<div id='parentDiv2'>
<div class='div1 childDiv'></div>
<div class='div2 childDiv'></div>
</div>
在您的 CSS 文件中,您应该添加以下代码:
#parentDiv1, #parentDiv2 {
width: 100px;
height: 100px;
float: left;
}
.div1 {
float: left;
}
.div2 {
float: left;
}