L shaped text box on a website - html

Question

I am trying to create the following text box design on a website. I could use images for the white boxes, but the issue is that I am not sure how to create an L shaped text area where the words wrap and fit nicely into those white boxes.
Does anyone know how to achieve this, or point me to the right direction to investigate?

Answer 1

Try CSS Exclusions.
CSS Exclusions define arbitrary areas around which inline content
can flow. CSS Exclusions can be defined on any CSS
block-level elements. CSS Exclusions extend the notion of content
wrapping previously limited to floats.
They are specifically related to word-wrap.

Answer 2

This is what you need
<style type="text/css">
#grid {
width: 30em;
height: 30em;
display: grid;
grid-columns: 25% 25% 25% 25%;
grid-rows: 25% 25% 25% 25%;
#top-right {
grid-column: 3;
grid-row: 2;
}
#bottom-left {
grid-column: 2;
grid-row: 3;
}
.lshapify {
wrap-flow: both;
}
#content {
grid-row: 1;
grid-row-span: 4;
grid-column: 1;
grid-column-span: 4;
}
</style>

Answer 3

I can't give you an exact solution to your problem but you could investigate and leverage from CSS shape-outside techniques to solve this problem. Unfortunately there is limited support for this at the moment so it depends on the browsers you wish to target. A nice tool exists to check at http://caniuse.com/
You may encounter some issues with overlaying the content as you might not know the amount of text that needs to be catered for. Perhaps some JavaScript could solve that problem.
The below example shows how you can add a block using a CSS inset but I think you can use a polygon and position another block over it.
* {
box-sizing: border-box;
}
body {
margin: 0 auto;
max-width: 750px;
font-size: 10px;
}
div {
shape-outside: inset(50px 50px 50px 0px);
width: 200px;
height: 200px;
float: left;
}
<p>Sample used from CodePen at http://codepen.io/team/css-tricks/pen/b2da5018d8f20ac3a2ccc26edb724db6</p>
<div></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis impedit libero esse odio excepturi fuga est ut itaque a quod suscipit, rerum asperiores. Consequuntur voluptates illo rerum recusandae pariatur asperiores, aspernatur, saepe ipsum error dolorem, quod inventore possimus modi deleniti tenetur et officiis.</p>
<p>Nemo ab in totam ratione sequi error, ea dolorum repudiandae omnis, eaque facere impedit fugiat. Dolorum distinctio autem sequi enim quidem esse accusamus repudiandae voluptatum nobis, velit, molestiae. Eaque maiores, harum. Saepe esse repellendus sint.</p>
<p>Labore provident optio quis commodi quod quaerat quo similique perspiciatis libero facere. Suscipit odit quas nemo, enim laudantium, provident repellendus natus nostrum facilis expedita adipisci qui, harum minus quidem officia cupiditate repellat ut praesentium. Possimus corporis, error atque ex adipisci, illum suscipit pariatur saepe impedit aliquam amet eos reiciendis quidem hic, nisi. Sint nobis modi, nesciunt quasi placeat quia.</p>
<p>Veniam inventore corrupti quisquam illum debitis vitae accusamus nobis alias cum iste error magnam, cupiditate earum! Incidunt at consequuntur, rem ipsa odio ipsum deleniti repudiandae blanditiis harum ut in, fugit officia rerum ad, corporis dolore!</p>
<p>Commodi repellendus esse quibusdam enim qui totam ipsum, consequuntur officia vel dolores, quod corrupti eveniet maiores minus explicabo, sapiente ratione doloribus laboriosam impedit nesciunt a obcaecati quam veritatis! Placeat, velit possimus delectus, atque voluptate iste alias illo, dolor odit ipsa facere quibusdam? Non omnis aliq.</p>