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

5b29643522a43028728885.png
Как выровнять тест под углом?
  • Вопрос задан
  • 1884 просмотра
Решения вопроса 1
@McBernar
Самое лучшее решение — отобрать у дизайнера компьютер.
Это я вам как дизайнер говорю.

Кажется, что <pre> будет самым простым вариантом.
Ответ написан
Пригласить эксперта
Ответы на вопрос 8
bugo_aneo
@bugo_aneo
Верстальщик по жизни, йог, буддист, кофеман
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);
}
Ответ написан
Xaz16
@Xaz16
Front End Developer
Думаю, из всех выше предложенных вариантов самым интересным будет использовать
https://www.html5rocks.com/en/tutorials/shapes/get... css shapes.

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

или попробовать сделать форматирование текста через white-space
Ответ написан
profesor08
@profesor08 Куратор тега CSS
Да разбей на строки, каждую в отдельный блок. Зада им white-space: no-wrap. Масштабируй шрифт относительно ширины окна wv.
Ответ написан
@ggrnd0
расположить кучу прозрачных блоков разной длины со стилями
float: right;
clear: right;

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

линию рисовать отдельно. зависит от требований, думаю можно background gradient сделать.
Ответ написан
alex-1917
@alex-1917
Если ответ помог, отметь решением
Банальное тестирование на юзер-фрэндли выпилит такого дизайнера далеко и надолго! Пилите, шура! И не придется вести бестолковый спор Верстальщик vs Дизайнер!
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы