如何使用带有三角形的CSS形状外文字? [英] How to flow text using CSS shape-outside with a triangle?

问题描述

.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使文本沿三角形流动.但是，我似乎无法使文本停留在左侧并与三角形成一定角度流动.

I have a project where I'm trying to flow text along a triangle using shape-outside. However, I can't seem to make the text stay to left and flow at an angle with the triangle.

这是浮子向左移动的地方. 链接到jsfiddle

Here it is with the float left. Link to jsfiddle

我试图使文本保留在左侧的所有内容都忽略了形状外.

Anything I've tried to get the text to stay on the left ignores the shape-outside.

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

Is there a way to do this or a better approach?

这就是我想要的样子: 带有文字的三角形的图像

This is what I want it to look like: Image of triangle with text

推荐答案

简单地创建width:100%并使用float:right而不是左:

Simply make the width:100% and use float:right instead of 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>

这篇关于如何使用带有三角形的CSS形状外文字?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！