0

Подскажите,как правильно расположить точки как на картинке? Пробовал сделать через position absolute, но мне кажется что я делал что-то не правильно тк точки разъезжались очень сильно.

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

1
  • 1
    Во-первых, объясни зачем тебе эти точки, во-вторых покажи (выложи сюда ) свой пример, и в-третьих получишь внятный ответ...
    – Air
    23 апр 2022 в 6:01

1 ответ 1

2

Вариант на position: absolute;

:root{--size: 20px; --red: #de0909; --violet: #5e46f0;}

.curs-block {
  width: 200px;
  height: 90px;
  background: #ccc;
  position: relative;
}

.cur {
  display: block;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  position: absolute;
  transform: translate(var(--tX, 0), var(--tY, 0));
}

.l0 {left: 0;}
.l25 {left: 25%; --tX: -25%;}
.l50 {left: 50%; --tX: -50%;}
.r0 {right: 0;}
.r25 {right: 25%; --tX: 25%;}
.t0 {top: 0;}
.t50 {top: 50%; --tY: -50%;}
.b0 {bottom: 0;}

.cur--red {background-color: var(--red);}
.cur--violet {background-color: var(--violet);}
<div class="curs-block">
  <div class="cur cur--red l0 t0"></div>
  <div class="cur cur--red l50 t0"></div>
  <div class="cur cur--red r0 t0"></div>
  <div class="cur cur--violet l25 t50"></div>
  <div class="cur cur--violet r25 t50"></div>
  <div class="cur cur--violet l0 b0"></div>
  <div class="cur cur--violet l50 b0"></div>
  <div class="cur cur--violet r0 b0"></div>
</div>


Вариант на Flexbox

:root{--size: 20px; --red: #de0909; --violet: #5e46f0;}

.curs-block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 200px;
  height: 90px;
  background: #ccc;
  position: relative;
}

.row {
  display: flex;
  align-items: center;
  width: 100%;
}

.row-between {justify-content: space-between;}
.row-around {
  justify-content: space-around;
  padding: 0 calc(var(--size) / 2);
  box-sizing: border-box;
  }

.cur {
  display: block;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
}

.cur--red {background-color: var(--red);}
.cur--violet {background-color: var(--violet);}
<div class="curs-block">
  <div class="row row-between">
    <div class="cur cur--red"></div>
    <div class="cur cur--red"></div>
    <div class="cur cur--red"></div>
  </div>
  <div class="row row-around">
    <div class="cur cur--violet"></div>
    <div class="cur cur--violet"></div>
  </div>
  <div class="row row-between">
    <div class="cur cur--violet"></div>
    <div class="cur cur--violet"></div>
    <div class="cur cur--violet"></div>
  </div>
</div>


Ну и вариант на background

:root{--size: 20px; --red: #de0909; --violet: #5e46f0;}

.curs-block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 200px;
  height: 90px;
  background-color: #ccc;
  background-image: 
    radial-gradient(circle, var(--red) calc(70% - 1.25px), transparent 70%),
    radial-gradient(circle, var(--red) calc(70% - 1.25px), transparent 70%),
    radial-gradient(circle, var(--red) calc(70% - 1.25px), transparent 70%),
    radial-gradient(circle, var(--violet) calc(70% - 1.25px), transparent 70%),
    radial-gradient(circle, var(--violet) calc(70% - 1.25px), transparent 70%),
    radial-gradient(circle, var(--violet) calc(70% - 1.25px), transparent 70%),
    radial-gradient(circle, var(--violet) calc(70% - 1.25px), transparent 70%),
    radial-gradient(circle, var(--violet) calc(70% - 1.25px), transparent 70%);
  background-repeat: no-repeat;
  background-position: 
    0 0, 50% 0, 100% 0,
    25% 50%, 75% 50%,
    0 100%, 50% 100%, 100% 100%;
  background-size: var(--size) var(--size);
  position: relative;
}
<div class="curs-block"></div>

2
  • Спасибо))))))))
    – Cracker
    23 апр 2022 в 11:16
  • @Cracker, если мой ответ вам помог, отметьте его галочкой как правильный
    – De.Minov
    23 апр 2022 в 12:15

Ваш ответ

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

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