如何实现CSS布局中梯形背景内标题自适应宽度并水平居中？

Question

css布局怎实现在梯形背景中自适应梯形的宽度，如图所示：

图中的梯形是一个背景图，现在每个标题在不同的位置，怎么让标题实现各个位置占满梯形的宽度（如红色虚线所示），并且还能将标题文字水平居中？

Answer 1

shape-outside 看着是可以。但是和你期望的还不太像

https://jsrun.net/grDKp/edit

---

下面这样有可能更好理解。我尝试了 inline 和 清除浮动，好像都和 shape-outside 不太搭配。

Answer 2

获取标题举例父元素顶部的高度，然后用js算出来此处的宽度，要用到三角函数