将文本包装在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让文字与形状的右边框对齐
• 根据height
的角度调整其width和transform: skew()

好的：由于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>