Как заверстать эти элементы?

Question

[MegaPuxapb]

Как сверстать белые кружочки?

Comments

[archelon]

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

[Артур Карапетян]

::after/::before у 2-ух блоков?

[MegaPuxapb]

archelon, я вижу всего 3 :)
1. ::after/::before на 2 блока
2. 4 img c position absolute
3. картинка фоном
4. ???

[Kovalsky]

MegaPuxapb, "4 img c position absolute" - а картинки зачем?

"картинка фоном" - не прокатит.

archelon, что может быть не оптимального в банальном размещении четырех кругляшков по углам контейнера?

[archelon]

MegaPuxapb, 4 внутренних блока с position:absolute, множественный background.

[Сергей Горячев]

archelon, вот я бы выбрал "множественный background" скорей всего и картинку в base64 или svg, чтобы не жрать ресурсы.

А что касается вопроса, тут явно подвох должен быть.
Что-то типа "они должны быть пролзрачными, так как фон может быть неоднородно белый".
Вот тогда задача сразу приобрела бы интерес)))

[archelon]

Никита Полевой,
Чем меньше лишних html-элементов, тем лучше. Под "лишними" понимаю элементы, не несущие семантической нагрузки, созданные только для оформления.
В идеале: html - только семантика, а все оформление — в css. На практике — увы, всегда приходится идти на компромиссы.

[archelon]

Сергей Горячев, да. так будет чище. хотя я недолюбливаю base64

[Kovalsky]

archelon, это чисто религиозное?

[archelon]

в копилку способов: еще можно несколько radial-gradient на бэкграунде.

Answer 1

[Сергей delphinpro]

https://jsfiddle.net/Lk0p90tc/

<div>
  Рассчитаем стоимость обслуживания за 15 минут
</div>

div {
  width: 250px;
  height: 70px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  font-size: 12px;
  font-family: sans-serif;
  padding: 5px 40px;
  color: #fff;
  background: #EBA146 no-repeat;
  background-image:
    radial-gradient(circle at center, #fff 0, #fff 46%, transparent 50%, transparent),
    radial-gradient(circle at center, #fff 0, #fff 46%, transparent 50%, transparent),
    radial-gradient(circle at center, #fff 0, #fff 46%, transparent 50%, transparent),
    radial-gradient(circle at center, #fff 0, #fff 46%, transparent 50%, transparent),
    linear-gradient(to right, #EBA146, #E17233);
  background-position:
    5px 5px,
    calc(100% - 5px) 5px,
    5px calc(100% - 5px),
    calc(100% - 5px) calc(100% - 5px),
    0 0;
  background-size:
    12px 12px,
    12px 12px,
    12px 12px,
    12px 12px,
    100% 100%;
}

Comments

[Anton Filippov]

приз в студию)

[Kovalsky]

Да, очень круто, удалю свой ответ. Только calc по сути не нужен, отступы можно считать относительно нужного края, как-то так.

[Сергей delphinpro]

Никита Полевой, Да, так лучше.

[Redrica]

Сергей, я правильно понимаю, что такое решение будет работать и в случае изменения геометрии кнопки?

[Сергей delphinpro]

Redrica, да, это просто рисование на фоне.

Answer 2

[archelon]

псевдоэлементы основного и внутреннего блока https://jsfiddle.net/gxr8004a/
относительно чистый вариант с минимумом лишних элементов

Answer 3

[#rybak]

Вот неплохой вариант через псевдо-элементы.

Answer 4

[Владислав Петренко]

Псевдоэлементами

Comments

[Максим]

а у нас четыре псевдо-элемента ?

[Kovalsky]

Максим Ленский, а это имеет хоть какое-то значение? Значит будут еще два вспомогательных.

[Максим]

Никита Полевой, я не спорю но вообще вроде бы чем меньше "левых" блоков тем лучше ?

[amoryblaine]

Максим Ленский, а почему абсолютами не вариант?
pos:a;
h: 1rem;
w: 1rem;
top: 1rem;
left: 1rem;
bgc: transparent;
bdrd: 50%;

и родителю pos:r;

[Kovalsky]

Максим Ленский, а, тогда я наконец понял, что имел в виду ТС под вопросом "Как сверстать белые кружочки?": подразумевается стилизация исключительно контейнера, без использования вспомогательных элементов, окай.

[Максим]

Никита Полевой, у меня тоже есть дар Ванги ...:)