Как это сверстать?

Question

[jertik3]

Как выровнять тест под углом?

Comments

[Денис Букреев]

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

[Сергей delphinpro]

Денис Букреев, Люблю, когда верстальщики перекидывают стрелки на дизайнеров =)
Каждый такой дизайн — это вызов фронтэндеру: стоишь ты чего-то или являешься просто конвеерным работником.

[Владимир Проскурин]

Сергей delphinpro, +1 а то привыкли лендосы клепать не думая.

[Денис Букреев]

Сергей delphinpro, придумывать костыли на не продуманный дизайн - показывать стою ли я чего-то?)

[Сергей delphinpro]

Денис Букреев, оценивать продуманность дизайна по предоставленному кусочку вряд ли стоит.

[Денис Букреев]

Сергей delphinpro, мы и не оцениваем его целиком, а смотрим конкретный случай

[Сергей delphinpro]

Денис Букреев, Мне трудно с вами спорить. Мы разговариваем на разных языках...

Answer 1

[McBernar]

Самое лучшее решение — отобрать у дизайнера компьютер.
Это я вам как дизайнер говорю.

Кажется, что <pre> будет самым простым вариантом.

Comments

[Dmitry Strelets]

Или заставить его выучить HTML5 и CSS3. Чтоб прочувствовал. и понимал что рисует. Такой дизайнер пусть визитки рисует с листовками.

[Бобёр Нубяра]

Dmitry Strelets, ага, чтобы дизайнер потом рисовал кирпичики, думая, что "ну такое нельзя реализовать". А то, что на картинке, как минимум, можно сделать через supports и css-shapes.

Answer 2

[Полина Емельянова]

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

Comments

[sim3x]

Отблагодарил жалобой - спам

В следующий раз вставьте ответ в тело ответа

[Полина Емельянова]

sim3x, Вдруг, и в правду снесут..))

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

[sim3x]

Полина Емельянова, В ответ, не в коментарии

Answer 3

[Алексей Чипига]

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

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

Answer 4

[Артур]

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

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

Comments

[Сергей delphinpro]

Так вы попробуйте трансформации =) ничего у вас не выйдет..

Answer 5

[profesor08]

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

Answer 6

[ggrnd0]

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

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

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

Answer 7

[Lorem Ipsum]

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

Answer 8

[BarryHAllen]

before + after + transform

Answer 9

[alex-1917]

Банальное тестирование на юзер-фрэндли выпилит такого дизайнера далеко и надолго! Пилите, шура! И не придется вести бестолковый спор Верстальщик vs Дизайнер!