Keep the text inside a parallelogram and follow the shape

Question

I am trying to archive the text inside a parallelogram. The edges of the text should follow the shape. The length of the text is dynamic so, I also need the height of the shape to be automatically adjust. Is this possible?

Here is my current code:

.parallelogram{
  width: 350px; /* Set your desired width */
  background-color: orange; /* Set your desired background color */
  -webkit-shape-outside: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  shape-outside: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  padding: 50px;
}

<div class="parallelogram">
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>

Using the above code, the text is getting cropped on the side and also not following the shape. When I use transform skew, the text also getting transformed. I do not want that.

Thanks

Answer 1

You can approximate it like below:

.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>