.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>
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.
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
shape-outside
is only supported in WebKit browsers. It is not supported in IE, Edge or Firefox. caniuse.com/#feat=css-shapes – Rasso Apr 6 '18 at 3:33