.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 沿着三角形排列文本。但是，我似乎无法让文本保持向左并与三角形成一定角度流动。
这是左边的浮动。链接到 jsfiddle
我试图让文本保持在左侧的任何内容都会忽略外部形状。
有没有办法做到这一点或更好的方法？
这就是我想要的样子：带有文本的三角形图像
简单地制作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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句