Как сделать выравнивание текста по наклонной линии?

Даже примера кода нету : так как в голову не приходит как сделать 



Гуру CSS3 как такое реализовать ?

Источник

Нашёл интересный вариант решение Пример

Вопрос задал на SO

Решение нашлось на SO 



.element{
  shape-outside: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Triangle-grey.svg/2000px-Triangle-grey.svg.png);
  shape-image-threshold: 0.2;
  float: left;
  height: 300px;
  padding: 0 20px;
}



  
  


  
CSS shapes / dLotus
  
  

      
Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lore
ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lore
ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lore
ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…
  






Это круто ARPIL GOYAL выдал 100% результат
    

Ответы

Ответ 1

Почти ничего сложного, если не бояться замарать ручки дикими костылями) 

Вижу два варианта решения:

Использование shape-outside  

Но, к сожалению, этот вариант абсолютно не кроссбраузерный и работает только в webkit-движках: http://caniuse.com/#feat=css-shapes

Куча блоков

В варианте с треугольным обтеканием это легко реализовать и автоматизировать процес
с помощью JS. Я считаю этот вариант вполне приемлемым, если того требует задача. Конечно, автоматизировать создание блоков в помощью js будет весьма затруднительно, если форма обтекания сложная.

В своем примере я использовал оба варианта. 

С шейпами все ясно: по трем точкам нарисовал область обтекания и готово.

"Кучу блоков" я наплодил с помощью js: создал один блок шириной 300px и с помощью js наплодил после него потомков, каждый короче на 10px.

Пример на jsfiddle: https://jsfiddle.net/ipshenicyn/h2o9fbav/2/

HTML



очень много текста


CSS

Код треугольников обтекания:

.shape-left - это блок, который я буду плодить с помощью js

.shape-right - блок с использованием shape-outside

.shape-left{
    float: left;
    width: 300px;
    height: 10px;
    clear: both;
}
.shape-right{
    width: 400px;
    height: 400px;
    float: right;
    shape-outside: polygon(400px 0, 400px 400px, 0 400px);
}


JS

Код, который множит .shape-left с убыванием ширины, создавая тем самым треугольную область:

var $el = $('.shape-left'),
    width = $el.width(),
    count = width / 10;

for(var i = 0; i < count; i++){
    width = $el.width();
    $el = $el.clone().css('width',width-10).insertAfter($el);
}