Создать диаграмму, используя css, css-doodle или bootstrap

Question

Я хочу сгенерировать прямоугольную форму из 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>

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>

Answer 2

Вы можете использовать этот код для получения диагональных линий

.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 деления, как показано:

Вы можете использовать вышеуказанный код для этих 4 делений (отмечен синим цветом) и получать диагональные линии по мере необходимости. Более того, вам нужно будет удалить определенные границы из некоторых элементов div. Смотрите это:

Чтобы получить элементы div для формирования квадрата, вам понадобится всего 6 элементов div. 4 из них - это div, отмеченные на изображении выше, а 2 - родительские, которые будут содержать 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;
}