Обернуть текст внутри треугольников в гибком дизайне

Редактировать: я понял проблему: shape-outside должен быть родственным, а не дочерним элементом элемента, на который он хочет повлиять. Я решил переписать раздел в виде сетки (как было рекомендовано в комментариях, спасибо АХ!). Codepen обновляется, если кому-то интересно. Каждый элемент сетки теперь является заполнителем и содержит каждый треугольник div. Внутри каждого треугольного div есть div в стиле shape-outline и простой элемент p с текстом. Игра с горизонтальными полями элементов сетки работает. Не самое элегантное, но это решение.

Эй! Я работаю над этим совсем немного, но не могу заставить его работать. Я пытаюсь построить эту танграмоподобную сетку, и я хотел бы обернуть текст внутри каждого треугольника. Я нашел некоторые решения, используя shape-outside, но, поскольку я использую display:flex для родительского div, я считаю, что это не совсем применимо к моему случаю. Открыты для рассмотрения решений на основе сетки или вообще другого дизайна, если это упростит задачу.

Кодепен

Как это работает: 6 рядов по 4 элемента в каждом, все четные строки перемещены на 100% вверх, чтобы оказаться на том же уровне, что и предыдущая нечетная строка, реализованы треугольники с клипом, указывающим в каждом из четырех возможных направлений. Любая помощь более чем приветствуется!

#edu-grid {
    height: 700px;
    width: 90%;
}

.edu-row {
    height: 33%;
    width: 100%;
}
.edu-item {
    height: 100%;
    width: 25%;
    border: 1px solid black;
}

.edu-top-left {
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.edu-top-right {
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.edu-bottom-right {
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.edu-bottom-right-shape {
    shape-outside: polygon(100% 0, 100% 100%, 0 100%);
    height: 100%;
    width: 100%;
    float: left;
    margin: 0;
}

.edu-bottom-left {
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.edu-bocc {
    background: blue;
}

.edu-blank {
    background: black;
}

.edu-mcg {
    background: red;
}

.edu-whu {
    background: green;
}

.edu-upb {
    background: yellow;
}

.edu-up {
    margin-top: -231px;
}

.flex {
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
}
<div id = "edu-grid">
  <div id = "edu-1" class = "flex edu-row">
    <div class = "edu-item edu-blank edu-top-left">a</div>
    <div class = "edu-item edu-bocc edu-top-left">a</div>
    <div class = "edu-item edu-blank edu-top-right">a</div>
    <div class = "edu-item edu-mcg edu-top-left">a</div>
  </div>
  <div id = "edu-2" class = "flex edu-row edu-up">
    <div class = "edu-item edu-bocc edu-bottom-right"></div>
    <div class = "edu-item edu-bocc edu-bottom-right"><div class = "edu-bottom-right-shape"></div><div><p>a</p></div></div>
    <div class = "edu-item edu-bocc edu-bottom-left">a</div>
    <div class = "edu-item edu-mcg edu-bottom-right">lorem ipsum etc etch</div>
  </div>
  <div id = "edu-3" class = "flex edu-row">
    <div class = "edu-item edu-bocc edu-top-right"></div>
    <div class = "edu-item edu-bocc edu-top-right"></div>
    <div class = "edu-item edu-bocc edu-top-left"></div>
    <div class = "edu-item edu-mcg edu-top-right"></div>
  </div>
  <div id = "edu-4" class = "flex edu-row edu-up">
    <div class = "edu-item edu-blank edu-bottom-left"></div>
    <div class = "edu-item edu-bocc edu-bottom-left"></div>
    <div class = "edu-item edu-blank edu-bottom-right"></div>
    <div class = "edu-item edu-whu edu-bottom-left"></div>
  </div>
  <div id = "edu-5" class = "flex edu-row">
    <div class = "edu-item edu-upb edu-top-right"></div>
    <div class = "edu-item edu-upb edu-top-left"></div>
    <div class = "edu-item edu-whu edu-top-right"></div>
    <div class = "edu-item edu-whu edu-top-left"></div>
  </div>
  <div id = "edu-6" class = "flex edu-row edu-up">
    <div class = "edu-item edu-upb edu-bottom-left"></div>
    <div class = "edu-item edu-upb edu-bottom-right"></div>
    <div class = "edu-item edu-whu edu-bottom-left"></div>
    <div class = "edu-item edu-whu edu-bottom-right"></div>
  </div>
</div>

Макет и, в некоторой степени, «семантика» Tetris, по-видимому, указывают на то, что он ближе к макету сетки CSS, чем к серии гибких блоков.

A Haworth 19.10.2022 19:21
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
1
82
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я только что видел последние изменения, которые вы сделали.

У меня была немного другая идея, поэтому добавьте ее сюда на случай использования.

Все это представляет собой сетку, и этот фрагмент не представляет идею изогнутых строк.

Элементы в сетке размещаются с использованием системы сетка-столбец/сетка-строка, поэтому в сетке может быть два элемента. каждый представляет собой треугольник типа тетриса.

Если где-то нет треугольной части (например, в первой ячейке сетки есть только одна часть), то ни одна часть не помещается в это положение, поэтому мы можем видеть фон сетки, а не притворяться, что там есть часть.

* {
  margin: 0;
}

.container {
  background-color: black;
  height: 100vmin;
  aspect-ratio: 4 / 3;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px;
  --so0: polygon(0 0, 100% 0, 0 100%);
  --so1: polygon(0 0, 100% 0, 100% 100%);
  --so2: polygon(100% 0, 100% 100%, 0 100%);
  --so3: polygon(100% 100%, 0 100%, 0 0);
  position: relative;
  font-size: 3vmin;
}

.container>* {
  z-index: 1;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  color: white;
  background-color: var(--bg);
  clip-path: var(--cp);
  overflow: hidden;
}

.container>*>*:first-child {
  width: 100%;
  height: 100%;
  float: var(--fl);
  shape-outside: var(--so);
  z-index: -1;
}

.bottomright {
  --so: var(--so0);
  --fl: left;
  --cp: var(--so2);
}

.topleft {
  --so: var(--so2);
  --fl: right;
  --cp: var(--so0);
  text-align: right;
}

.bottomleft {
  --so: var(--so1);
  --fl: right;
  --cp: var(--so3);
  text-align: right;
}

.topright {
  --so: var(--so3);
  --fl: left;
  --cp: var(--so1);
}

.container>*>*:last-child {
  padding: 5px;
}

.blue {
  --bg: blue;
}

.red {
  --bg: red;
}

.green {
  --bg: green;
}

.yellow {
  --bg: yellow;
  color: black;
}

.row1 {
  grid-row: 1;
}

.row2 {
  grid-row: 2;
}

.row3 {
  grid-row: 3;
}

.col1 {
  grid-column: 1;
}

.col2 {
  grid-column: 2;
}

.col3 {
  grid-column: 3;
}

.col4 {
  grid-column: 4;
}
<div class = "container">

  <div class = "blue row1 col1 bottomright">
    <div></div>
    <div>text text text text text text text text text text text text text text text text text text text </div>
  </div>

  <div class = "blue row1 col2 topleft">
    <div></div>
    <div>text text text text text text text text text text text text text text text text text text text </div>
  </div>

  <div class = "blue row1 col2 bottomright">
    <div></div>
    <div>text text text text text text text text text text text text text text text text text text text </div>
  </div>

  <div class = "blue row1 col3 bottomleft">
    <div></div>
    <div>text text text text text text text text text text text text text text text text text text text </div>
  </div>

  <div class = "red row1 col4 topleft">
    <div></div>
    <div>text text text text text text text text text text text text text text text text text text text </div>
  </div>

  <div class = "red row1 col4 bottomright">
    <div></div>
    <div>text text text text text text text text text text text text text text text text text text text </div>
  </div>

  <div class = "topright blue col1 row2">
    <div></div>
    <div>text text text text text text text text text text text text text text text text text text text </div>
  </div>

  <div class = "blue topleft row2 col2">
    <div></div>
    <div>text text text text text text text text text text text text text text text text text text text </div>
  </div>

  <div class = "bottomright blue col2 row2">
    <div></div>
    <div>text text text text text text text text text text text text text text text text text text text </div>
  </div>

  <div class = "blue topleft col3 row2">
    <div></div>
    <div>text text text text text text text text text text text text text text text text text text text </div>
  </div>

  <div class = "green topleft col4 row2">
    <div></div>
    <div>text text text text text text text text text text text text text text text text text text text </div>
  </div>

  <div class = "bottomright red col4 row2">
    <div></div>
    <div>text text text text text text text text text text text text text text text text text text text </div>
  </div>

  <div class = "topleft yellow col1 row3">
    <div></div>
    <div>text text text text text text text text text text text text text text text text text text text </div>
  </div>

  <div class = "bottomright yellow col1 row3">
    <div></div>
    <div>text text text text text text text text text text text text text text text text text text text </div>
  </div>

  <div class = "topleft yellow col2 row3">
    <div></div>
    <div>text text text text text text text text text text text text text text text text text text text </div>
  </div>

  <div class = "bottomright yellow col2 row3">
    <div></div>
    <div>text text text text text text text text text text text text text text text text text text text </div>
  </div>

  <div class = "topleft green col3 row3">
    <div></div>
    <div>text text text text text text text text text text text text text text text text text text text </div>
  </div>

  <div class = "bottomright green col3 row3">
    <div></div>
    <div>text text text text text text text text text text text text text text text text text text text </div>
  </div>

  <div class = "topleft green col4 row3">
    <div></div>
    <div>text text text text text text text text text text text text text text text text text text text </div>
  </div>

  <div class = "bottomright green col4 row3">
    <div></div>
    <div>text text text text text text text text text text text text text text text text text text text </div>
  </div>

Большое спасибо! Да, намного чище, чем мой подход, мне нравится, что нет необходимости в произвольных полях -100%, чтобы перемещать вещи туда, где они должны быть. Благодарю за помощь и терпение!

Marco 20.10.2022 20:33

Другие вопросы по теме