如何使用带有三角形的 CSS shape-outside 来流动文本？

Question

.triangle {
  width: 40%;
  height: 400px;
  background-color: green;
  float: left;
  -webkit-shape-outside: polygon(0 0, 100% 0, 100% 100%);
  shape-outside: polygon(0 0, 100% 0, 100% 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.text {}

<div class="triangle">
</div>
<div class="text">
  <p>
    Lorem ipsum dolor sit amet, nobis commune pertinax ei quo, pri laudem putant instructior in. Per molestiae evertitur ut, voluptua volutpat in sit. Ad viderer scaevola lucilius eos. Ea sed vulputate dissentias neglegentur. At eam cibo nostrum efficiendi.
  </p>
</div>

我有一个项目，我正在尝试使用 shape-outside 沿三角形排列文本。但是，我似乎无法使文本保持在左侧并与三角形成一定角度流动。

这是左边的浮动。 Link to jsfiddle

任何我试图让文本留在左边的东西都会忽略外面的形状。

有没有办法做到这一点或更好的方法？

这就是我想要的样子： Image of triangle with text

Answer 1

只需制作width:100% 并使用float:right 而不是left：

.triangle {
  width: 100%;
  height: 400px;
  background-color: green;
  float: right;
  -webkit-shape-outside: polygon(0 0, 100% 0, 100% 100%);
  shape-outside: polygon(0 0, 100% 0, 100% 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

<div class="triangle">
</div>
<div class="text">
  <p>
    Lorem ipsum dolor sit amet, nobis commune pertinax ei quo, pri laudem putant instructior in. Per molestiae evertitur ut, voluptua volutpat in sit. Ad viderer scaevola lucilius eos. Ea sed vulputate dissentias neglegentur. At eam cibo nostrum efficiendi. in. Per molestiae evertitur ut, voluptua volutpat in sit. Ad viderer scaevola lucilius eos. Ea sed vulputate dissentias neglegentur. At eam cibo nostrum efficiendi. in. Per molestiae evertitur ut, voluptua volutpat in sit. Ad viderer scaevola lucilius eos. Ea sed vulputate dissentias neglegentur. At eam cibo nostrum efficiendi.
  </p>
</div>

Answer 2

见我。不是 100% 确定你的“环绕”是什么意思，但也许这会让你开始。注意float:left。请注意，我更改了角度（宽度）以强调环绕。

.triangle {
float:left;
  width: 80%;
  height: 400px;
  background-color: green;
  -webkit-shape-outside: polygon(0 0, 100% 0, 100% 100%);
  shape-outside: polygon(0 0, 0 100%,100% 100%  );
  -webkit-clip-path: polygon(0 0, 0 100% , 100% 100%);
  clip-path: polygon(0 0, 0 100% , 100% 100%);
}

.text {}

<div class="triangle">
</div>
<div class="text">
  Lorem ipsum dolor sit amet, nobis commune pertinax ei quo, pri laudem putant instructior in. Per molestiae evertitur ut, voluptua volutpat in sit. Ad viderer scaevola lucilius eos. Ea sed vulputate dissentias neglegentur. At eam cibo nostrum efficiendi.
   Lorem ipsum dolor sit amet, nobis commune pertinax ei quo, pri laudem putant instructior in. Per molestiae evertitur ut, voluptua volutpat in sit. Ad viderer scaevola lucilius eos. Ea sed vulputate dissentias neglegentur. At eam cibo nostrum efficiendi.
</div>

Answer 3

可能只是漂浮吧？

.triangle {
  width: 100%;
  height: 400px;
  background-color: green;
  float: right;
  -webkit-shape-outside: polygon(0 0, 100% 0, 100% 100%);
  shape-outside: polygon(0 0, 100% 0, 100% 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.text {}

<div class="triangle">
</div>
<div class="text">
  <p>
    Lorem ipsum dolor sit amet, nobis commune pertinax ei quo, pri laudem putant instructior in. Per molestiae evertitur ut, voluptua volutpat in sit. Ad viderer scaevola lucilius eos. Ea sed vulputate dissentias neglegentur. At eam cibo nostrum efficiendi.
  </p>
</div>