jertik3

Вы никогда не задумывались, почему столько разнообразия среди методик самоорганизации? Именно потому, что самый простой способ самоорганизации — самый сложный. Он называется «бери и делай». Он прекрасно работает у высокомотивированных людей и позволяет добиваться отличных результатов, даже если какие-то события происходят вне графика. Хотя, стоп. Никакого графика у этого способа тоже нет, ведь с помощью этого способа все ежедневные рабочие дела заканчиваются к обеду и ты принимаешься за завтрашние планы.

Но, к сожалению, настолько мотивированных людей очень мало. Обычным смертным нужны все эти системы. Но, дружище, они настолько субъективны, что советовать какую-то не имеет особого смысла — и тут уже вопрос не в сложности или простоте, а эффективности именно для тебя.

before + after + transform

https://www.html5rocks.com/en/tutorials/shapes/get...
shape-outside: polygon

расположить кучу прозрачных блоков разной длины со стилями
float: right;
clear: right;

текст без стилей.

линию рисовать отдельно. зависит от требований, думаю можно background gradient сделать.

попробовать искривить блок
transform: skewX(40deg);

или попробовать сделать форматирование текста через white-space

Да разбей на строки, каждую в отдельный блок. Зада им white-space: no-wrap. Масштабируй шрифт относительно ширины окна wv.

askd.rocks/pres/css/# Слайды 30-35.

<div class="parallelogram-content">
	<p>I have a pen</p>
	<p>I have a code</p>
	 <p>Ugh!</p>
	<p>CodePen</p>
</div>

.parallelogram-content {
	/* no transform */
}
.parallelogram-content p {
	transform-origin: 0 0;
	transform: skew(30deg);
}

Думаю, из всех выше предложенных вариантов самым интересным будет использовать
https://www.html5rocks.com/en/tutorials/shapes/get... css shapes.

Но к сожалению, нужно считаться с этой таблицей https://caniuse.com/#feat=css-shapes Если нужна совместимость с мозилой и IE/Edge, то придется городить костыли.

он не умер, он просто так пахнет