Как доработать кружок?

Question

Как доработать кружок?

Рейтинг: 0Ответов: 1Опубликовано: 19.06.2023

чтобы получить как на скрине ( но без использования before) https://jsbin.com/botoyepiwa/edit?html,css,output

css html

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Можна как-то так. Хотя для продольных линей всё равно лучше использовать псевдоклассы :before :after

body {
  background-color: #f00;
}

div {
  position: relative;
  margin-top: 40px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #023d8d 0, #023d8d 45%, transparent 45.01%, transparent 50%, #023d8d 70.1%, #023d8d 100%);
  box-sizing: content-box;
}

<div></div>

Как доработать кружок?

Ответы