1

введите сюда описание изображения

Дошел до того, что это можно сделать при помощи svg. Подскажите как сверстать такой элементы, или хотя бы как правильно гуглить про такой элемент

1
  • Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете. 14 янв 2022 в 18:18

1 ответ 1

1

Для этого есть очень много способов. Но я вам рекомендую почитать про псевдоэлементы в css. Такое обычно делают с помощью них.

Для достижении своего результата вы можете взять за основу вот такую разметку. Думаю вы сможете добиться нужного результата если немного покурите стили.

ul li {
  padding: 6px 0;
}

li {
  list-style-type: none; /* Убираем маркеры у списка */
}

ul:before {
  content: '';
  color: #5d31c4; /* Выбираем цвет */
  position: absolute; /* позиционироваем  */
  border-left: 2px solid; /* Даем рамку слева*/
  margin-left: 11px; /* Оступ слева до булетов */
  width: 1px; /* ширина */
  height: 90px; /* высота */
  
}

li:before {
  content: '\2022'; /* Берем точку */
  margin-right: 15px; /* Даем оступ от текста */
  color: #5d31c4; /* Выбираем цвет */
  border: 3px solid; /* Делаем рамку */
  border-radius: 100px; /* Скругляем рамку */
  padding: 0 6px; /* даем внутренние оступы по бокам */
}
<ul>
  <li>Первый пункт</li>
  <li>Второй пункт</li>
  <li>Очень важная инфа</li>
</ul>

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.