javascript - 在 CSS 形状内包装文本

Question

我想将我的文本对齐/环绕在一个三 Angular 形内以遵循其边框形状。 我用平行四边形做了一个例子，但结果并不令人满意。

.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根据你的 Angular transform: skew()

好处:由于polygon()方法，您可以创建任何您喜欢的形状并让文本围绕它 float 。您甚至可以通过将相对单位设置为其 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>