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

Question

我正在尝试将文本存档在平行四边形内。文本的边缘应遵循形状。文本的长度是动态的，所以我还需要自动调整形状的高度。这可能吗？

这是我当前的代码：

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

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

使用上面的代码，文本在侧面被裁剪并且也不遵循形状。当我使用变换倾斜时，文本也会发生变换。我不想这样。

谢谢

Answer 1

您可以像下面这样近似：

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