Треугольный отступ (текст лесенкой)

Question

каким способом можно задать данный отступ:

Знаю что можно shape-outside: polygon() треугольник обтекаемы сделать.
Либо тупо padding или margin использовать. Но мне интересно, есть ли более автоматизированное решение, в случае если контента добавиться?

Answer 1

Динамичное решение на JS.

let max = 100; // максимальная ширина треугольника

function gt() { // Тут в основном просчёт
    let item = document.querySelectorAll('#list li'), // получаем все элементы
      len = item.length, // узнаём сколько их
      mid = Math.round(len/2), // Получаем середину
      step = max / (mid - 1); // Вычесляем шаг на основе максимальной длины
      
  for(let i = 0; i < mid; i++) { // проходим цикл до центра
    // Выставляем padding-right элементам
    item[i].style.paddingRight = (step*i)+'px';
    item[len-i-1].style.paddingRight = (step*i)+'px';
  }
} gt();

// Ниже для визуализации

document.querySelector('#add').addEventListener('click', function() {
    document.querySelector('#list').insertAdjacentHTML('beforeend', '<li>Lorem, ipsum dolor</li>');
  gt();
});

document.querySelector('#del').addEventListener('click', function() {
    document.querySelectorAll('#list li')[0].remove();
  gt();
});

#list {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
}

#list li {
  display: block;
  text-align: right;
}

#list li::after {
  content: '?';
  display: inline;
}

button {
  padding: .5em 2em;
}

<button id="add">+</button>
<button id="del">-</button>
<div>
  <ul id="list">
    <li>Lorem, ipsum dolor</li>
    <li>Lorem, ipsum dolor</li>
    <li>Lorem, ipsum dolor</li>
    <li>Lorem, ipsum dolor</li>
    <li>Lorem, ipsum dolor</li>
  </ul>
</div>

БЛОГ НА HUSL

Треугольный отступ (текст лесенкой)

Ответы (1 шт):