Html 将文本保持在平行四边形内并遵循形状

.container {
  display: inline-flex; /* we need a flexbox to use percentage height */
  background-color: orange;
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

.parallelogram {
  width: 350px;
  padding: 10px;
  text-align: justify;
}
/* a bit hacky but you need an extra element 
   with a hardcoded height to compensate for the height of
   the float elements
*/
.parallelogram:after {
  content:"";
  display:block;
  height: 35px; /* you have to update this manually */
}

.parallelogram span:before,
.parallelogram span:after {
  content:"";
  height: 100%; /* 100% parent height to adjust to content */
  width: 50%; /* half width */
}

/* one is placed on the left and the other on the right */
.parallelogram span:before {
  float: left;
  shape-outside: polygon(0 0,50% 0,0 100%);
}
.parallelogram span:after {
  float: right;
  shape-outside: polygon(50% 100%,100% 0,100% 100%);
}

<div class="container"> <!-- you need an extra container here  -->
  <div class="parallelogram">
    <span></span> <!-- and an extra element here for the floats  -->
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
    lorem ipsum lorem ipsum lorem ipsum
  </div>
</div>