0

введите сюда описание изображения

вообще не понимаю как такое можно сверстать

3
  • Это же не верстка. Для такого может использоваться генерируемый SVG-код. 5 авг 2021 в 22:07
  • Я бы предложил заменить HTML и SVG на canvas, было бы гораздо удобнее, опять же это нужно ещё и перерисовывать (ибо фильтры сверху), да ещё и "выдёргивать" в PDF формате.
    – De.Minov
    6 авг 2021 в 6:18
  • 1
    данный вопрос в виде картинки следует закрыть, потому что он бесполезен для базы знаний (тот, у кого возникнет подобный вопрос, не сможет найти данный вопрос и ответы к нему) 6 авг 2021 в 6:47

1 ответ 1

5

Да тут уйма разных способов возможна.

Например, сделать сетку фоновой картинкой. Или градиентом. Или таблицей с границами. А поверх нее положить блок, где позиционировать абсолютно картинки.

или даже не поверх таблицы, а в нее:

.gridParent {
  margin-top: 30px
}

.grid {
  border-collapse: collapse;
  width: 100%;
}

.grid td {
  border-top: 1px solid;
  padding: 10px 0;
  position: relative;
  height: 30px;
}

.other {
  text-align: center;
  width: 15%;
}

.grid td.first {
  border-color: transparent;
}

tr:not(:last-child) .other {
  border-right: 1px solid;
}

.other div {
  display: inline-block;
  width: 1em;
  height: 1em;
  text-align: center;
  box-shadow: 0 0 0 3px white;
  position: absolute;
  top: -0.5em;
}

.image1 {
  background-color: gray;
  color: white;
}

.image2 {
  background-color: salmon;
  color: white;
  transform: rotate(45deg)
}

.image3 {
  background-color: #ccc;
  border-radius: 100%;
}

.marker {
  display: inline-block;
  box-shadow: 0 0 0 3px white;
  position: absolute;
  top: -0.5em;
  background-color: white;
}

.marker {
  border: 1px solid;
  border-radius: 100%;
  display: inline-block;
  width: 1em;
  height: 1em;
  text-align: center;
}

.marker2 {
  border-radius: 0;
}
<div class="gridParent">
  <table class="grid">
    <tr>
      <td class="first">
        <div class="marker">1</div>
      </td>
      <td class="second">
        <div class="marker marker2">a</div>
      </td>
      <td class="other"></td>
      <td class="other">
        <div class="image1">*</div>
      </td>
      <td class="other">
        <div class="image2">></div>
      </td>
      <td class="other"></td>
      <td class="other">
        <div class="image3">#</div>
      </td>
      <td class="other"></td>
    </tr>
    <tr>
      <td class="first">
        <div class="marker">2</div>
      </td>
      <td class="second">
        <div class="marker marker2">b</div>
      </td>
      <td class="other">
        <div class="image2">></div>
      </td>
      <td class="other"></td>
      <td class="other"></td>
      <td class="other">
        <div class="image1">*</div>
      </td>
      <td class="other">
        <div class="image3">#</div>
      </td>
      <td class="other">
        <div class="image1">*</div>
      </td>
    </tr>
    <tr>
      <td class="first">
        <div class="marker">3</div>
      </td>
      <td class="second">
        <div class="marker marker2">c</div>
      </td>
      <td class="other">
        <div class="image1">*</div>
      </td>
      <td class="other">
        <div class="image3">#</div>
      </td>
      <td class="other"></td>
      <td class="other">
        <div class="image2">></div>
      </td>
      <td class="other">
        <div class="image2">></div>
      </td>
      <td class="other">
        <div class="image1">*</div>
      </td>
    </tr>
  </table>
</div>

0

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.