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
  • тёска надо бы ещё даты добавить 16 янв 2022 в 12:59

Ваш ответ

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

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