CODEWITHSUNDEEP
htmlcss
user9605304
user9605304

Reputation: 13

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>

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

Upvotes: 1

Views: 889

Answers (3)

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

It might be just to 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%);
}

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

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272996

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>

Upvotes: 1

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

See me. Not 100% sure what your "wrap around" means but perhaps this will get you started. Note the float:left. Note I changed the angle (width) to provide emphasis on the wrap.

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

Upvotes: 0

Related Questions