Редактировать: я понял проблему: 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>
Я только что видел последние изменения, которые вы сделали.
У меня была немного другая идея, поэтому добавьте ее сюда на случай использования.
Все это представляет собой сетку, и этот фрагмент не представляет идею изогнутых строк.
Элементы в сетке размещаются с использованием системы сетка-столбец/сетка-строка, поэтому в сетке может быть два элемента. каждый представляет собой треугольник типа тетриса.
Если где-то нет треугольной части (например, в первой ячейке сетки есть только одна часть), то ни одна часть не помещается в это положение, поэтому мы можем видеть фон сетки, а не притворяться, что там есть часть.
* {
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%, чтобы перемещать вещи туда, где они должны быть. Благодарю за помощь и терпение!
Макет и, в некоторой степени, «семантика» Tetris, по-видимому, указывают на то, что он ближе к макету сетки CSS, чем к серии гибких блоков.