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代替左：

.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>

如何使用带有三角形的CSS外形流动文本？

3 个答案: