在 CSS 形状内换行

Question

我想在一个三角形内对齐/包裹我的文本以跟随它的边框形状。 我用平行四边形做了一个例子，但结果并不令人满意。

.parallelogram { 
    width: 200px; 
    padding: 20px; 
    -webkit-transform: skew(-30deg); 
    -moz-transform: skew(-30deg); 
    transform: skew(-30deg);
    background: #ccc;
    margin: 80px;
}

.parallelogram .text {
    width: 200px;
    -webkit-transform: skew(30deg); 
    -moz-transform: skew(30deg); 
    transform: skew(30deg);
    margin: 20px;
}

http://jsfiddle.net/HarrysNature/noqa6qLc/3/

有什么想法吗？

Answer 1

您可以将shape-outside 与float 结合使用，将文本与斜线对齐。

工作原理

• 在您的文本之前创建一个新元素 <div class="shape"></div>

• 用它创建一个薄的平行四边形形状

  shape-outside: polygon(90% 0, 100% 0, 10% 100%, 0 100%);
  

• 让它float: left 使文本与形状的右边框对齐
• 根据你的transform: skew()的角度调整它的height和width

优点：由于polygon() 方法，您可以创建您喜欢的任何形状并让文本在其周围浮动。您甚至可以通过将相对单位设置为其width 和height 来使其具有响应性。

坏处：无法在 IE/Edge 中运行，请参阅 caniuse 和 MDN 上的浏览​​器兼容性。

出于演示目的，我在形状中添加了background 和clip-path，以了解它的实际工作原理。当然你可以删除这 3 条规则：

.shape {
  width: 50px;
  height: 80px;
  -webkit-shape-outside: polygon(90% 0, 100% 0, 10% 100%, 0 100%);
  shape-outside: polygon(90% 0, 100% 0, 10% 100%, 0 100%);
  float: left;
  /* the following three lines are only for demonstration purposes */
  background: #444;
  -webkit-clip-path: polygon(90% 0, 100% 0, 10% 100%, 0 100%);
  clip-path: polygon(90% 0, 100% 0, 10% 100%, 0 100%);
}

.parallelogram {
  width: 300px;
  padding: 20px 20px 20px 0;
  -webkit-transform: skew(-30deg);
  -moz-transform: skew(-30deg);
  transform: skew(-30deg);
  background: #ccc;
  margin: 20px auto;
}

.parallelogram .text {
  width: 300px;
  -webkit-transform: skew(30deg);
  -moz-transform: skew(30deg);
  transform: skew(30deg);
}

<div class="parallelogram">
  <div class="text">
    <div class="shape"></div>
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  </div>
</div>

Answer 2

您可以在线拆分文本并将每个文本包装到 div：

.parallelogram { 
width: 230px; 
padding: 20px; 
-webkit-transform: skew(-30deg); 
-moz-transform: skew(-30deg); 
transform: skew(-30deg);
background: #ccc;
margin: 80px;}

.parallelogram .text {
width: 220px;
-webkit-transform: skew(30deg); 
-moz-transform: skew(30deg); 
transform: skew(30deg);}


<div class="parallelogram">
<div class="text">
    text text text text text text text text
</div>
<div class="text">
    text text text text text text text text
</div>
<div class="text">
    text text text text text text text text
</div>
<div class="text">
    text text text text text text text text
</div>