Как нарисовать три кружочка на css?

Question

Нужно создать три кружочка как на фото Если сделать с помощью after и before я так понимаю получиться только два элемента ?

Answer 1

Ниже приведены 3 варианта (.a, .b и .c) с градиентами. У них общая идея, но вот чем они отличаются между собой:

.a Responsive по вертикали, но предполагается, что closest-side достигается по вертикали. В принципе, с помощью математики можно просчитать и другие варианты.
.b Нельзя указать размер круга в процентах.
.c Responsive по горизонтали (можно сделать аналогично по вертикали или в обоих направлениях), но нужна поддержка браузером container queries.

Пиксель добавляется для более хорошего сглаживания. Если есть необходимость работы в браузерах без поддержки calc, то надо продублировать полностью свойство с фоном и у первого убрать calc, оставив число, совпадающее с предыдущим.

div {
  width: 9em;
  height: 3em;
  border: 1px dotted red;
}

div + div {
  margin-top: 1em;
}

.a {
  background:
    radial-gradient(closest-side circle at 25%, blue 45%, transparent calc(45% + 1px)),
    radial-gradient(closest-side circle at 50%, blue 45%, transparent calc(45% + 1px)),
    radial-gradient(closest-side circle at 75%, blue 45%, transparent calc(45% + 1px));
}

.b {
  background:
    radial-gradient(.75em circle at 25%, blue 100%, transparent calc(100% + 1px)),
    radial-gradient(.75em circle at 50%, blue 100%, transparent calc(100% + 1px)),
    radial-gradient(.75em circle at 75%, blue 100%, transparent calc(100% + 1px));
}

.c {
  container-type: inline-size;
}

.c::before {
  content: "";
  display: block;
  height: 100%;

  background:
    radial-gradient(circle at 25%, blue 8cqi, transparent calc(8cqi + 1px)),
    radial-gradient(circle at 50%, blue 8cqi, transparent calc(8cqi + 1px)),
    radial-gradient(circle at 75%, blue 8cqi, transparent calc(8cqi + 1px));
}

<div class=a></div>
<div class=b></div>
<div class=c></div>

Answer 2

Можно сделать с помощью теней. Там удобнее получаются степени двойки, но можно обрезать размером контейнера. Накладывать одну точку на другую для скрытия совмещением в теории возможно, но фактически будут артефакты сглаживания, поэтому не рекомендую.

div {
  width: 6em;
  height: 3em;
  border: 1px dotted red;
  position: relative;
}

div + div {
  margin-top: 1em;
}

div::before {
  content: "";

  position: absolute;
  inset: 0 auto 0 .5em;
  margin: auto;

  width: 1em;
  height: 1em;
  background: blue;
  border-radius: 50%;
  
  filter: drop-shadow(2em 0 0 blue) drop-shadow(4em 0 0 blue);
}

.x {
  overflow: hidden;
}

<div></div>
<div class=x></div>

БЛОГ НА HUSL

Как нарисовать три кружочка на css?

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