javascript - 使用 css、css-doodle 或 bootstrap 创建图表

Question

我希望使用 CSS 生成一个矩形的 12 宫图表。我能使用的最好的是下面的 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>

Answer 1

这是一个包含一个元素和一些背景技巧的想法。它也是响应式的，您可以调整元素的大小并且结构将保持不变。我还考虑了 order 以正确放置元素

.box {
  width:280px;
  height:180px;
  border:3px solid;
  display:flex;
  flex-wrap:wrap;
  background:
    linear-gradient(to top right,transparent calc(50% - 2px), #000 calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 2px)),
    linear-gradient(to top left ,transparent calc(50% - 2px), #000 calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 2px));
  background-size:50% 50%;
   
  counter-reset:num;
  overflow:hidden;
  resize:both;
}
.box span {
  flex-grow:1;
  flex-basis:50%;
  height:25%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.box span:nth-child(3),
.box span:nth-child(5),
.box span:nth-child(9),
.box span:nth-child(11) {
  flex-basis:25%;
}
.box span:nth-child(2),
.box span:nth-child(6),
.box span:nth-child(8),
.box span:nth-child(12) {
  height:12.5%;
}
span:before {
  content:counter(num);
  counter-increment:num;
}

<div class="box">
  <span style="order:4"></span>
  <span style="order:1"></span>
  <span style="order:3"></span>
  <span style="order:6"></span>
  <span style="order:8"></span>
  <span style="order:11"></span>
  <span style="order:9"></span>
  <span style="order:12"></span>
  <span style="order:10"></span>
  <span style="order:7"></span>
  <span style="order:5"></span>
  <span style="order:2"></span>
</div>