Перенос текстового содержимого внутри треугольника, обрезанного на другой половине изображения

Question

Я пытаюсь добиться чего-то вроде этого:

Мне нужно отобразить текст и изображение в двух частях треугольника, как показано на изображении выше. Пытался использовать clip-path, но текстовое содержимое не обернуто и также есть проблемы с выравниванием.

.clipped-text{
  width: 250px; height: 250px;
  background: #1e90ff;
  clip-path: polygon(0 100%, 100% 100%, 0 0);
  text-align: justify;
  position: absolute;

}

.clipped-image{
  width: 250px; height: 250px;
  background: #1e90ff;
  clip-path: polygon(100% 100%, 100% 0, 0 0);
  text-align: justify;
   position: absolute;

}

<div>
 <img class="clipped-image" src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png"/>
 <p class="clipped-text">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
</p>
</div>

_{Свободный перевод вопроса Wrap text content inside a clip path polygon(triangle) shape and image clipped on other half от участника @Yashwanth Chowdary.}

Answer 1

Здесь вам нужен shape-outside:

.box {
  width: 300px;
  height: 300px;
  background: #1e90ff;
  text-align: justify;
}

.clipped-image {
  float:right;
  width: 100%;
  height: 100%;
  background: #1e90ff;
  shape-outside: polygon(100% 100%, 100% 0, 0 0);
  clip-path:     polygon(100% 100%, 100% 0, 0 0);
}

<div class="box">
  <img class="clipped-image" src="https://i.stack.imgur.com/xLNP9.png" />
  <p class="clipped-text">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </p>
</div>

Вы можете уменьшить код, как показано ниже:

.clipped-text  {
  width: 300px;
  height: 300px;
  background: #1e90ff;
  text-align: justify;
}

.clipped-text:before {
  content:"";
  float:right;
  width: 100%;
  height: 100%;
  background: url(https://picsum.photos/id/1069/400/400) center/cover;
  shape-outside: polygon(100% 100%, 100% 0, 0 0);
  clip-path:     polygon(100% 100%, 100% 0, 0 0);
}

<p class="clipped-text">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </p>

_{Свободный перевод ответа от участника @Temani Afif.}

БЛОГ НА HUSL

Перенос текстового содержимого внутри треугольника, обрезанного на другой половине изображения

Ответы (1 шт):