it is estimated that we can only use shape

html

<div class="shape">
  <p class="text">html

  <p class="text">html

  <p class="text">html

  <p class="text">html

  <p class="text">html

</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);
}

ide-iphone-x-head/" rel=" nofollow noreferrer "> for more information, please see

Sorry, I just got it wrong. Then change the way of thinking, that is, let the container of this text be a trapezoidal container

-manually split lines

text-indent

I don't think it's possible to display text by implementing a trapezoidal container, but there are many ways to implement trapezoidal icons-setting different border, applying pseudo elements after and before, and using 3D transforms. But none of this applies here. But it is not impossible, for example, to split the string and cooperate with 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>