CSS Stagger Text Indent Every Line

Question

I'm trying to recreate the above photo using CSS, but I haven't been able to think of a solution yet. I need to indent every new line of text slightly more/less to create the angle effect.

I thought initially of clip-path, but that just cuts the text. Text-indent only effects the first line. I could use the span tag on each new line... but with this being responsive the new line will change as the window collapses, so that won't work.

The only plausible solution I have thought of has been to create this effect in illustrator and export as an SVG. This has the downside of being treated like an image as far as sizing goes...but it gets the effect across. Responsive would be a challenge as well.

Any super CSS tricks anyone know of for this effect? Much appreciated.

@RobertLongson My bad, I took the svg tag off this and just have css now. I understand I can do it that way within an svg element...but I was hoping to be able to figure out a way using css and not svg. — Kyle Hawk, Apr 30 '20 at 15:19

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

Use shape-outside...

The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.

MDN

.main {}


.left {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: polygon(0 0, 100% 0, 0% 100%);
}

<div class="main">
  <div class="left"></div>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta nesciunt esse odit impedit expedita magni accusantium facere perferendis quasi architecto quo alias libero, iure, et repellendus, laborum quaerat nisi ipsam dolores. Cumque tenetur vitae
    totam, adipisci assumenda rerum saepe deserunt aliquam quidem sunt. Assumenda consequuntur unde tenetur aut blanditiis quidem minima dolorem eos repellendus ipsa quam fuga eius quia, a veniam totam itaque eaque. Aliquid incidunt vero beatae voluptates
    modi saepe id et, praesentium velit eos numquam architecto, deserunt nulla consectetur cupiditate repellat quisquam iste veritatis sunt temporibus commodi rem? Ex fugiat beatae hic vero vel in eius saepe nihil?</p>
</div>

CSS Stagger Text Indent Every Line

1 Answers1