CSS交错文本缩进每一行

Question

我正在尝试使用CSS重新创建上面的照片，但是我还没有想到一种解决方案。我需要稍微多一点/少一点缩进每行新文本，以创建角度效果。

我起初以为是剪切路径，但这只是剪切文本。文字缩进仅影响第一行。我可以在每条新行上使用span标签...但是随着这种响应，新行将随着窗口折叠而改变，因此将无法使用。

我想到的唯一可行的解​​决方案是在Illustrator中创建此效果并将其导出为SVG。就尺寸而言，这具有被当作图像对待的缺点...但是却能起到效果。响应也将是一个挑战。

任何超级CSS技巧都会使人知道这种效果？非常感谢。

Answer 1

使用shape-outside ...

shape-outside CSS属性定义了一个形状（它可以是非矩形的），相邻的内联内容应围绕该形状包装。默认情况下，内联内容环绕其边距框； shape-outside提供了一种自定义这种环绕的方式，可以将文字环绕在复杂的对象而不是简单的盒子周围。

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>