Обернуть текст внутри треугольников в гибком дизайне
Редактировать: я понял проблему: shape-outside должен быть родственным, а не дочерним элементом элемента, на который он хочет повлиять. Я решил переписать раздел в виде сетки (как было рекомендовано в комментариях, спасибо АХ!). Codepen обновляется, если кому-то интересно. Каждый элемент сетки теперь является заполнителем и содержит каждый треугольник div. Внутри каждого треугольного div есть div в стиле shape-outline и простой элемент p с текстом. Игра с горизонтальными полями элементов сетки работает. Не самое элегантное, но это решение.
Эй! Я работаю над этим совсем немного, но не могу заставить его работать. Я пытаюсь построить эту танграмоподобную сетку, и я хотел бы обернуть текст внутри каждого треугольника. Я нашел некоторые решения, используя shape-outside, но, поскольку я использую display:flex для родительского div, я считаю, что это не совсем применимо к моему случаю. Открыты для рассмотрения решений на основе сетки или вообще другого дизайна, если это упростит задачу.
Как это работает: 6 рядов по 4 элемента в каждом, все четные строки перемещены на 100% вверх, чтобы оказаться на том же уровне, что и предыдущая нечетная строка, реализованы треугольники с клипом, указывающим в каждом из четырех возможных направлений. Любая помощь более чем приветствуется!
1 ответ
Я только что видел последние изменения, которые вы сделали.
У меня была немного другая идея, поэтому добавьте ее сюда на случай использования.
Все это представляет собой сетку, и этот фрагмент не представляет идею изогнутых строк.
Элементы в сетке размещаются с использованием системы сетка-столбец/сетка-строка, поэтому в сетке может быть два элемента. каждый представляет собой треугольник типа тетриса.
Если где-то нет треугольной части (например, в первой ячейке сетки есть только одна часть), то ни одна часть не помещается в это положение, поэтому мы можем видеть фон сетки, а не притворяться, что там есть часть.