Как лучше сверстать такую нестандартную секцию?

Question

[Blondguy]

Как лучше расположить этот задний фон?
А также как расположить эти нижние кружочки?

Comments

[Ankhena]

- одной SVG, а список сам по себе
- отдельными псевдиками от элементов и расположить гридами/флексами со сдвигами или похуже абсолютами.

[Blondguy]

Ankhena, "- отдельными псевдиками от элементов"
Не понял, каких элементов? То есть кружки сделать псевдоэлементами текста?

[Ankhena]

Blondguy, у вас на картинке нарисован список преимуществ: <ul>
Каждый его элемент это li.
Иконка это украшение элементов списка - псевдоэлемент.

[Blondguy]

Ankhena, спасибо, попробую разместить этот список флексами, где каждому буду давать отступ вверх, а то попробовал абсолютами, все совсем ломается при адаптиве

[Ankhena]

Blondguy, это зависит от того как вы задаете позиционирование. Откуда считаете и какие единицы измерения используете.

[Максим]

Blondguy,
иногда лень отвечать

Answer 1

[Сергей delphinpro]

один из вариантов такой:



Зеленый блок - overflow:hidden

Answer 2

[Максим]

На обычно свг в ручном режиме не сложно сделать, чуть чуть почитать документацию и понять что в векторном формате всё имеет абсолютное позиционирование