CSS text ending indentation

Question

I\'m trying to achieve the red highlighted effect with CSS. The first row to be the longest, the second shorter and so on.

https://codepen.io/make96/pen/QmMJyx

Answer 1

There is something called shape-outside that can help to do this but of course not well supported :

.shape {
  shape-outside: polygon(0 300px, 300px 0, 300px 300px);
  width: 300px;
  height: 300px;
  float: right;
}

p {
  text-align: justify;
}

lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem
  ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume