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

Use shape-outside..

The shape-outside CSS property defines a shape around which inline content should wrap. By default, inline content wraps around its margin box.

MDN

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.right {
  width: 40%;
  height: 100vh;
  background-color: lightgray;
  /* for visibility */
  opacity: .25;
}

.right {
  -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  float: right;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

p {
  text-align: center;
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside -->

<div class="main">
  <div class="right"></div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt eos obcaecati tenetur, distinctio quia sit dolore atque non corrupti at maiores quaerat impedit enim quidem optio perspiciatis aspernatur animi voluptatum illo veritatis quod id minima facere
    exercitationem! Quisquam quasi nam error molestias, distinctio necessitatibus tempore nihil obcaecati incidunt, aliquid harum. Nihil hic voluptatibus molestias veniam alias officiis ipsam, rerum at rem facere et temporibus, ad fugiat labore sit, eum
    animi exercitationem. Nisi, cumque. Recusandae quos, ipsam corrupti itaque modi perspiciatis. Aperiam doloremque dolor dolorem facere quia laudantium repellendus consequatur. Rerum ullam ea autem id maiores suscipit animi corporis itaque debitis,
    molestias, eos incidunt soluta ducimus blanditiis, dolor dicta sunt veritatis. Ex ipsam praesentium nemo possimus? Aperiam labore in possimus minima, nemo incidunt voluptatem deserunt laudantium enim architecto fugiat illo maiores sequi odio similique
    numquam, ipsa corrupti quas rerum reiciendis, ducimus aut accusamus. Facilis libero eligendi blanditiis velit, aspernatur ipsam. Assumenda quos deserunt ea. Dolore quisquam sapiente rerum ad numquam atque enim officiis quae? Provident beatae repellat
    eligendi praesentium id dolorum consequatur sapiente modi facere totam, vero atque accusantium molestiae delectus facilis quisquam ipsam, maiores eaque ex, ea commodi accusamus necessitatibus. Totam, alias nulla. Eum commodi vitae, animi deserunt
    molestias neque?
  </p>
</div>

Answer 2

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;
}

<div class="shape"></div>
<p>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</p>