html页面文字梯形排版怎么实现？

Question

上图这种类似于梯形的排版如何实现？

Answer 1

估计只能用shape了

html

<div class="shape">
  <p class="text">html页面文字梯形排版怎么实现？</p>
  <p class="text">html页面文字梯形排版怎么实现？</p>
  <p class="text">html页面文字梯形排版怎么实现？</p>
  <p class="text">html页面文字梯形排版怎么实现？</p>
  <p class="text">html页面文字梯形排版怎么实现？</p>
</div>

css

.shape {
  width: 300px;
}
.shape:before {
  content: '';
  float: left;
  width: 100px;
  height: 150px;
  shape-outside: polygon(0 0, 100px 0, 0 150px, 0 0);
}

详见这里

Answer 2

抱歉，刚刚理解错了。那么换个思路，就是让这段文字的容器是个梯形容器

-------手动分割线

text-indent

Answer 3

想通过实现一个梯形容器来展示文字我觉得是不可能的，实现梯形图标倒是有多种方式——设置不同的border、应用伪元素after和before、使用3Dtransform...但这些在此都不适用。但也不是没有办法，比如可以对字符串进行分割，再配合text-indent。

<script>
    var str = '全书由作者的序言、后记，以及主角大庭叶藏的三个手札组成，描写主角从青少年到中年，为了逃避现实而不断沉沦，经历自我放逐、酗酒、自杀、用药物麻痹自己，终于一步步走向自我毁灭的悲剧，在自我否定的过程中，抒发自己内心深处的苦闷，以及渴望被爱的情愫…… 透过主角叶藏的人生遭遇，可以说太宰治巧妙地将自己一生的经历与思想表达出来，并藉此提出身为人最真切的痛苦问题。从滞涩的文中更可体会其内心深切的苦楚，在完成本篇作品之后，太宰治终归还是选择了投水的方式，为他自己划下最后的句点。因此，《人间失格》算是太宰治半自传性作品。',minLength=10,strArr=[],startIndex=0,endIndex=minLength;
    while(endIndex<str.length){
        if(str.length-(minLength+2)<0){
            endIndex = str.length;
        }
        strArr.push(str.slice(startIndex,endIndex));
        startIndex = endIndex,
        minLength+=2;
        endIndex+=minLength;
    }
    console.log(strArr);
       for(let i in strArr){
           let p = document.createElement('p');
        p.style.textIndent = (strArr.length - i)*12;
        p.innerHTML = strArr[i];
          document.body.appendChild(p);
       }
</script>