CSS或Javascript的“楼梯”布局中的文本？

Question

我正在尝试用 html/css/jquery 中的布局来实现（见附件）

有人知道如何做到这一点吗？我试图为该行放置一个 css 形状或 svg - 这很好，但是如何使文本变为这种格式？任何亮点都会令人难以置信，从我的研究中我找不到任何这样的信息！谢谢你的时间:)

编辑：这种格式怎么样？

Answer 1

这是 JS 中的一种可能性。它基本上相当于插入宽度增加的浮动 div，每一个行高高（我将 div 涂成红色以使其更明显）。如果您愿意，也可以直接在 HTML 中执行此操作。

var stairsHeight = 500;
var lineHeight = 20;
for (var y = lineHeight; y <= stairsHeight; y+=lineHeight) {
	$(".stairs").prepend('<div style="height:' + lineHeight + 'px; width:' + y + 'px; float:right; clear:right; background:red;"></div>');
}

.stairs {width:500px; height:500px; line-height:20px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stairs">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</div>

Answer 2

有一个很好的教程：https://sarasoueidan.com/blog/css-shapes/。 使用这种非标准形状键是 polygon() 用于 shape-in​​side 或 shape-outside 。他们确实做了很好的插图，因此很容易理解并应用于您自己的想法。

Answer 3

Css 形状

您要查找的内容称为 shape-outside css 属性。

目前只有 chrome 支持此功能。

MDN link

如果您想知道如何使用它：

.element {
  float: left;
  box-sizing: border-box;
  shape-outside: polygon(0 0, 0 100px, 100px 100px);
  -webkit-clip-path: polygon(0 0, 0 100px, 100px 100px);
  width: 100px;
  height: 100px;
  background-color: firebrick;
}
span {
  vertical-align: top;
}

<div class="element">

</div>
<p>Lorem ipsum dolar si amet Lorem ipsum
  <br>dolar si amet Lorem ipsum
  <br>dolar si amet Lorem ipsum dolar si amet Lorem ipsum dolar si amet Lorem ipsum dolar si amet Lorem ipsum dolar si amet</p>

Css shapes tutorial

Answer 4

这可能是一个 png，但绝对是一个画布，你可以使用带有 lineTo x, y 坐标的画布绘制任何形状，它使用 javascript，但即使你不擅长 javascript，周围也有很好的资源 你可以在这里试试： http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_path