Search code examples
htmlcssflexboxclip-pathshape-outside

Wrap text inside triangles in flex design

Edit: I figured out the issue: shape-outside needs to be sibling, and not child, of the item that it wants to affect. I decided to rewrite the section as a grid (as recommended in the comments, thanks AH!). Codepen is updated in case someone is curious. Each element of the grid is now a placeholder, and it contains each triangle div. Inside each triangle div there is the shape-outline styled div, and a simple p element with the text. Playing with horizontal margins of grid elements it works. Not the most elegant, but it's a solution.

Heyo! I've been working on this for quite a bit, but can't quite seem to make it work. I am trying to build this tangram-like grid, and I'd like to wrap text inside each triangle. I found some solutions using shape-outside, but since I'm using display:flex to the parent div, that does not quite apply to my case I believe. Open to considering grid-based solutions or different design altogether, if that makes it easier.

Codepen

How it works: 6 rows with 4 elements each, all even lines moved 100% up so to be at the same level as the previous odd line, triangles realized with clip-path pointing in each of the four possible directions. Any help is more than welcome!

#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>

Solution

  • I have just seen the recent edits you have made.

    I had a slightly different idea so add it here in case of use.

    The whole thing is a grid and this snippet does not introduce the idea of flexed rows.

    The items in the grid are placed using the grid-column/grid-row system and so there can be two items in a grid. each is a Tetris type triangle.

    If there is no triangle piece somewhere (e.g. the first cell of the grid has only one piece) then no piece is put in that position so we can see the background of the grid rather than pretend there is a piece there.

    * {
  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>