Javascript 使用css、css涂鸦或引导创建图表

我期待着生成一个矩形形状的12个房子图表使用CSS。我能用的最好的是下面的CSS涂鸦代码；即使它并不完美。 如何实现下面的示例图像？该结构必须是一个单一的结构，我想添加文本到所有的房子

<css-doodle >
 :doodle {

  overflow: hidden;
  height:14em; width:16em;
  @grid: 4;
}
:container {
  grid-gap: 1px;
  transform: rotate(45deg) scale(1.5);
}
  background: #d0262e;
</css-doodle>

：涂鸦{
溢出：隐藏；
高度：14em；宽度：16em；
@网格：4；
}
：容器{
网格间距：1px；
变换：旋转（45度）比例（1.5）；
}
背景：#d0262e；

---

您可以使用此代码实现对角线

.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°，以获得从右上到左下的对角线

宽度：141px是毕达哥拉斯定理的结果。我认为边是100px，因此斜边（在我们的例子中是对角线）必须是100√2，大约是141

你应该将你的星象图分成4个部分，如图所示：

您可以将上述代码用于这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>

---

下面是一个包含一个元素和一些背景技巧的想法。它还具有响应性，您可以调整图元的大小，并且结构将保持不变。我还考虑了

顺序

以正确放置元素

.box{
宽度：280px；
高度：180像素；
边框：3倍实心；
显示器：flex；
柔性包装：包装；
背景：
线性梯度（至右上角，透明钙（50%-2px），#000钙（50%-1px）钙（50%+1px），透明钙（50%+2px）），
线性梯度（至左上角，透明钙（50%-2px）、#000钙（50%-1px）钙（50%+1px）、透明钙（50%+2px））；
背景大小：50%50%；
计数器复位：num；
溢出：隐藏；
调整大小：两者；
}
.箱跨{
柔性生长：1；
弹性基准：50%；
身高：25%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.箱跨：第n个孩子（3），
.箱跨：第n个孩子（5），
.箱跨：第n个孩子（9），
.箱跨：第n个孩子（11）{
弹性基准：25%；
}
.箱跨：第n个孩子（2），
.箱跨：第n个孩子（6），
.箱跨：第n个孩子（8），
.箱跨：第n个孩子（12）{
身高：12.5%；
}
跨度：之前{
内容：计数器（num）；
计数器增量：num；
}

您还可以使用和定位：

*{
框大小：边框框；
}
文章{
最小宽度：30V最大；
最小高度：20V最大；
高度：80vh；
宽度：80vw；
边框：实心；
计数器复位：divs；
溢出：隐藏；
背景：黑色；
}
div{
剪辑路径：多边形（50%0%，100%50%，50%100%，0%50%）；/*制作菱形*/
背景：浅蓝色；
反增量：divs；
身高：50%；
位置：相对位置；
变换：缩放（0.99）；/*将显示父对象的边界*/
}
分区：第n个孩子（奇数）{
背景：浅绿色；
}
部门：以前{
内容：柜台（divs）；
保证金：自动；
}
分区：第n个孩子（2）{
顺序：-1；
前-25%；
左：0；
垫面：10%；
}
分区：第n个孩子（1）{
左-25%；
}
分区：第n个孩子（3）{
左-25%；
前-50%；
左：15%；
}
分区：第n个孩子（4）{
左-50%；
前-25%
}
分区：第n个孩子（5）{
左-25%；
前-50%；
左：15%
}
分区：第n名儿童（6）{
左-50%；
前-25%；
垫底：10%；
}
分区：第n名儿童（7）{
左：25%；
前-100%；
}
分区：第n个孩子（8）{
左：0%；
前-75%；
垫底：10%；
}
分区：第n个孩子（9）{
左：75%；
前-150%；
右：15%；
}
分区：第n个孩子（10）{
左：0%；
前-175%；
}
分区：第n名儿童（11）{
左：75%；
前-250%；
右：15%；
}
分区：第n名儿童（12）{
左：0；
前-275%；
垫面：10%；
}
/*互换头寸*/
文章：悬停{
背景：番茄；
}
文章：悬停分区：第n个孩子（2）{
左：50%；
}
文章：悬停分区：第n个孩子（12）{
左-50%；
}
文章：悬停分区：第n个孩子（3）{
左：75%；
填充：0 10%0 0；
}
文章：悬停分区：第n个孩子（11）{
左-25%；
填充：0.10%；
}
文章：悬停分区：第n个孩子（4）{
左：0%；
}
文章：悬停分区：第n个孩子（10）{
左-50%；
}
文章：悬停分区：第n个孩子（5）{
左：75%；
填充：0 10%0 0；
}
文章：悬停分区：第n个孩子（9）{
左-25%；
填充：0.10%；
}
文章：悬停分区：第n个孩子（6）{
左：0%；
}
文章：悬停分区：第n个孩子（8）{
左-50%；
}

我会试试看。4个div是如何并排排列成一个正方形的？@KapishM我已经编辑了我的答案，包括了解释。我使用了这个代码。根本看不到任何形状。@KapishM奇怪，这对我很有用。请注意，这并没有给出确切的代码。您仍然需要相应地旋转对角线并删除边框，但这会让您知道如何处理它。@KapishM您可以再次共享您的代码笔吗？您没有正确复制笔链接。太棒了！有一个问题，你的图表中的计数是水平的。如何更改计数以匹配示例图表中的计数方式？计数有点逆时针。@KapishM CSS计数器不能这样做。您可以手动编写这些数字，也可以考虑<代码>命令< /代码>属性来更改元素的顺序以获得所需的结果。在所有情况下，都有一些手工工作，但我认为这不是问题，因为它只有12个元素。好的。明白你说的话，不可能直接数数。但如果我不算的话。我想把它们逆时针排列成一系列，把数组的值放进去。我可以像示例中那样逆时针索引1到12吗？使用身份证还是其他方式？@你是个ge

#parentDiv1, #parentDiv2 {
  width: 100px;
  height: 100px;
  float: left;
}
.div1 {
  float: left;
}
.div2 {
  float: left;
}