Контейнер наклонного текста

Мне было интересно, знает ли кто-нибудь из вас, можно ли сделать что-нибудь вроде этого:

параллельные абзацы с наклоном

Я знаю о http://www.infimum.dk/HTML/slantinfo.html но я не могу разместить текст на наклонных участках.


html css css-shapes
person user684142    schedule 30.03.2011    source источник
comment
В великолепной демонстрации Эрика Мейера вы можете увидеть текст в наклонный ...   -  person Kyone    schedule 30.03.2011
comment
Вы не можете заставить это работать с динамическим объемом текста, если вы не используете JavaScript. Это вариант для вас?   -  person thirtydot    schedule 30.03.2011
comment
Если посмотреть на исходный код демонстрации Эрика, довольно сложно автоматически воспроизвести такой эффект, потому что фон специально выкован, а текст представляет собой наложение, также специально разработанное, чтобы идеально вписаться в него. выполнение этого динамически может стать довольно запутанным.   -  person ITroubs    schedule 30.03.2011
comment
Я буду использовать Javascript, чтобы сделать его более гибким.   -  person user684142    schedule 01.04.2011

Ответы (3)


arrow_upward
8
arrow_downward

Сделал это с помощью JavaScript: http://jsfiddle.net/billymoon/AvmE8/

Но это просто для удобства, вы можете сделать то же самое с HTML.

Не будет применяться ко всем обстоятельствам и потребует небольшой настройки, но может работать в тех случаях, когда вы знаете приблизительную длину - или знаете верхнюю границу.

html:

<div id='left'>whatever text</div><div id='right'>random text</div>

css:

#left, #right{
    text-align: justify;
    position: absolute;
    width:60%;
    right:0;
}
#right{
    right:auto;
    left:0;
}

js:

for (i = 1; i < 40; i++) {
    $('<div />').css({
        border: '1px solid silver',
        height: 10,
        width: (5 * i),
        float: 'left',
        clear: 'left'
    }).prependTo($('#left'))
    $('<div />').css({
        border: '1px solid gold',
        height: 10,
        width: (200 - (5 * i)),
        float: 'right',
        clear: 'right'
    }).prependTo($('#right'))
}
person Billy Moon    schedule 30.03.2011
comment
конечно, вам нужно удалить серебряную и золотую границы для div - я оставил их, чтобы вы могли увидеть, как это работает. Мне нравится этот вопрос - заслуживает 5 голосов! Нам нужно больше диагональных линий в сети! - person Billy Moon; 30.03.2011
comment
Спасибо за быстрый ответ. Я думаю, что ваш вариант является наиболее гибким (с использованием js), поэтому я попробую его и отправлю вам сообщение, когда закончите. Спасибо еще раз. - person user684142; 01.04.2011
comment
Я хотел бы, чтобы эта идея развивалась и развивалась в более гибкое решение. Это можно сделать только с помощью css / html - и, следовательно, сценариев на стороне сервера, но js очень удобен. Просто нужен способ определить, что делать с разным объемом текста и т. Д. Мне интересно, где вы это возьмете. ваше здоровье. - person Billy Moon; 01.04.2011
comment
мы закончили, вот как это выглядит! еще раз спасибо, Билли Мун - person user684142; 29.04.2011
comment
Возможно, скоро появится лучший способ использования фигур CSS: alistapart.com/article/css-shapes-101 - person Billy Moon; 04.05.2014

arrow_upward
3
arrow_downward

Вот пример желаемого макета с использованием свойства CSS shape-outside, даже если он имеет статус «рекомендация кандидата» и не должен использоваться , поскольку он может измениться в любой момент и плохо поддерживается браузером:

DEMO (только современные браузеры webkit)

бок о бок контейнеры с наклонным текстом

Примечание: этот макет было бы намного проще создать, комбинируя shape-outside и shape-inside (т.е. без абсолютного позиционирования), но в настоящее время я не знаю браузеров, поддерживающих shape-inside.

p{
  width:550px;
  text-align:justify;
  overflow:hidden;
}
#right{
  position:absolute;
  top:0; left:355px;
}
p:before{
  content:'';
  width:40%;
  height:710px;
}
#left:before{
  float:right;
  shape-outside: polygon(100% 0, 100% 100%, 20% 100%);
}
#right:before{
  float:left;
  shape-outside: polygon(0 0, 100% 0, 20% 100%);
}
<p id="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac quam dignissim, tristique eros eget, aliquam nulla. Pellentesque dapibus mattis massa, eu dapibus arcu commodo vel. Vestibulum id suscipit felis, nec malesuada lacus. Nam lacinia elementum mauris ut lacinia. Nulla sed congue mi, in vehicula sapien. Nulla at ipsum sed metus feugiat interdum. In ultricies sem nec facilisis tincidunt. Suspendisse commodo ex sed ullamcorper gravida. Mauris velit mauris, egestas et est sit amet, ultricies mollis ipsum. Nunc sit amet quam ac nibh molestie porttitor sit amet sit amet ante. Mauris sollicitudin sit amet ligula non gravida.Curabitur auctor sollicitudin ante, ut rhoncus massa. Ut eu iaculis orci. Aliquam sit amet tortor tellus. Quisque iaculis tellus varius pellentesque blandit. Aenean sed sapien et ex vehicula bibendum. Proin nec orci id mauris semper facilisis. Vivamus massa purus, commodo et ullamcorper dignissim, dictum vitae tellus. Duis vel lacus posuere, pulvinar felis sit amet, viverra enim. Sed elementum eros et sem luctus, sed volutpat metus finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sodales tincidunt rhoncus.Pellentesque felis dolor, tempus ac ex ac, dictum lacinia ligula. Quisque ornare hendrerit erat, tincidunt dignissim quam auctor id. Duis pellentesque enim in ante pretium luctus. Morbi dignissim enim sollicitudin augue venenatis, porta sodales tortor auctor. Mauris tincidunt dui at lectus commodo cursus. In bibendum ac nunc accumsan porta. Aliquam ac sem vitae ligula pellentesque pulvinar non in velit. In molestie diam eu vulputate iaculis. Mauris fermentum, elit sit amet tincidunt tempor, lorem arcu iaculis leo, aliquam feugiat nulla eros eu enim. Pellentesque hendrerit magna ut ligula ultricies, in euismod sapien luctus. Suspendisse potenti. Vestibulum porta malesuada egestas. Cras vehicula est a purus tempus, eu volutpat diam tempus.Integer eu est faucibus, pulvinar eros at, porta enim. Aenean nec lorem nec arcu fringilla lacinia vitae non quam. Nullam ultrices, felis vitae hendrerit luctus, mi turpis tincidunt ex, eget pulvinar nulla turpis quis tellus. Phasellus nec lorem vel turpis consectetur viverra. Cras a tellus mi. Pellentesque congue sodales orci. Curabitur at facilisis nunc. Donec vel congue metus. Suspendisse id dui leo. Aenean sed dolor aliquet, molestie justo et, sodales risus. Proin ornare sagittis lectus quis condimentum.</p>
<p id="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac quam dignissim, tristique eros eget, aliquam nulla. Pellentesque dapibus mattis massa, eu dapibus arcu commodo vel. Vestibulum id suscipit felis, nec malesuada lacus. Nam lacinia elementum mauris ut lacinia. Nulla sed congue mi, in vehicula sapien. Nulla at ipsum sed metus feugiat interdum. In ultricies sem nec facilisis tincidunt. Suspendisse commodo ex sed ullamcorper gravida. Mauris velit mauris, egestas et est sit amet, ultricies mollis ipsum. Nunc sit amet quam ac nibh molestie porttitor sit amet sit amet ante. Mauris sollicitudin sit amet ligula non gravida.Curabitur auctor sollicitudin ante, ut rhoncus massa. Ut eu iaculis orci. Aliquam sit amet tortor tellus. Quisque iaculis tellus varius pellentesque blandit. Aenean sed sapien et ex vehicula bibendum. Proin nec orci id mauris semper facilisis. Vivamus massa purus, commodo et ullamcorper dignissim, dictum vitae tellus. Duis vel lacus posuere, pulvinar felis sit amet, viverra enim. Sed elementum eros et sem luctus, sed volutpat metus finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sodales tincidunt rhoncus.Pellentesque felis dolor, tempus ac ex ac, dictum lacinia ligula. Quisque ornare hendrerit erat, tincidunt dignissim quam auctor id. Duis pellentesque enim in ante pretium luctus. Morbi dignissim enim sollicitudin augue venenatis, porta sodales tortor auctor. Mauris tincidunt dui at lectus commodo cursus. In bibendum ac nunc accumsan porta. Aliquam ac sem vitae ligula pellentesque pulvinar non in velit. In molestie diam eu vulputate iaculis. Mauris fermentum, elit sit amet tincidunt tempor, lorem arcu iaculis leo, aliquam feugiat nulla eros eu enim. Pellentesque hendrerit magna ut ligula ultricies, in euismod sapien luctus. Suspendisse potenti. Vestibulum porta malesuada egestas. Cras vehicula est a purus tempus, eu volutpat diam tempus.Integer eu est faucibus, pulvinar eros at, porta enim. Aenean nec lorem nec arcu fringilla lacinia vitae non quam. Nullam ultrices, felis vitae hendrerit luctus, mi turpis tincidunt ex, eget pulvinar nulla turpis quis tellus. Phasellus nec lorem vel turpis consectetur viverra. Cras a tellus mi. Pellentesque congue sodales orci. Curabitur at facilisis nunc. Donec vel congue metus. Suspendisse id dui leo. Aenean sed dolor aliquet, molestie justo et, sodales risus. Proin ornare sagittis lectus quis condimentum.</p>

Это свойство также может (в сочетании с clip-path) позволить вам наклонить текст рядом с вырезанным изображением:

DEMO (только в современных браузерах webkit)

наклонная область текста рядом с изображением

Ссылки:

person web-tiki    schedule 13.01.2015

arrow_upward
0
arrow_downward

Подумайте вслух, но что, если у вас есть два вертикальных блока, расположенных бок о бок. В левом блоке используйте Slantastic технику Эрика Мейера справа. В правом div используйте его с левой стороны.

person dnagirl    schedule 30.03.2011
comment
Спасибо dnagirl, но этот вариант не очень гибкий. Я попробую использовать js, как в примере Билли Муна. - person user684142; 01.04.2011