html - 如何使用带有三 Angular 形的 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 使文本沿三 Angular 形流动。但是，我似乎无法让文本保持在左侧并与三 Angular 形成一定 Angular 流动。

这是左边的 float 。 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>