Как я могу создать круг с элементами в самом конце своей оси?

Question

Я буду использовать некоторые SVG, которые будут теми аватарами на оси.Пока все, что мне нужно, это подсказка о том, как установить эти аватары в самом конце каждой оси.

Я пытаюсь добиться этого:

Это код, который у меня пока есть:

body {
  background-color: #de4e40;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  margin: 0;
  display: flex;
}

.squareLoader {
  height: 200px;
  width: 200px;
  background-color: white;
  border: 1px solid black;
  border-radius: 50%;
}

<div class='squareLoader'></div>

А вот кодекс на случай, если вы захотите взглянуть.

Есть ли какой-нибудь гид или кто-нибудьможете мне помочь как этого добиться?Я могу использовать flexbox, а также использую React Native.На всякий случай.

Answer 1

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

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

body {
  background-color: #de4e40;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  margin: 0;
  display: flex;
}

.squareLoader {
  /* added 'position: relative', because parent elements of absolute positioned elements have to be positioned to prevent mayhem */
  position: relative;
  height: 200px;
  width: 200px;
  background-color: white;
  border: 1px solid black;
  border-radius: 50%;
}

.avatar {
  position: absolute;
  left: 75px;
  top: 75px;
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

.avatarN {
  top: -25px;
}

.avatarS {
  top: 175px;
}

.avatarE {
  left: 175px;
}

.avatarW {
  left: -25px;
}

и HTML с .avatar <div> с (вы можете прикрепить изображения SVG внутри этих элементов):

<div class='squareLoader'>
    <div class="avatar avatarN"></div>
    <div class="avatar avatarS"></div>
    <div class="avatar avatarE"></div>
    <div class="avatar avatarW"></div>
</div>

В предыдущем примере все четыре аватара <div> s имеют высоту и ширину 50px.

.avatarN имеет top позицию -25px, потому что это половина высоты изображения и left позиция 75px(половина ширины .squareLoader минус половина ширины изображения).

.avatarW имеет top позицию 75px (половина высоты .squareLoader минус половина изображениявысота) и left позиция 25px, что составляет половину высоты изображения.

И так далее для других элементов.

Если вы собираетесь сделать .squareLoader <div> изменить размер в зависимости от размера страницы, а размер изображения - в зависимости от размера страницы. Вы можете использовать CSS-функцию calc (), которую можно использовать везде, где разрешена единица измерения длины в CSS.

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

w3Schools имеет довольно приличное краткое объяснение всех единиц, разрешенных в CSS:

https://www.w3schools.com/cssref/css_units.asp

А также, ееИх страница также содержит значения позиций в CSS:

https://www.w3schools.com/cssref/pr_class_position.asp

Независимо от того, используете ли вы flexbox, вам все равно придется использовать свойство position, чтобы получить изображения там, где выхочу их.

Answer 2

Одна из идей для создания этого состоит в том, чтобы рассмотреть только фон, и с ним будет легче справиться:

body {
  background-color: #de4e40;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  margin: 0;
  display: flex;
}

.squareLoader {
  height: 250px;
  width: 250px;
  background:
    url(https://picsum.photos/50/50?image=1069) top center,
    url(https://picsum.photos/50/50?image=1069) bottom center,
    url(https://picsum.photos/50/50?image=1069) left center,
    url(https://picsum.photos/50/50?image=1069) right center,
    /*the circle*/
    radial-gradient(farthest-side, 
      #fff calc(100% - 32px),#000 calc(100% - 30px),
      #000 calc(100% - 30px),#000 calc(100% - 20px),
      transparent calc(100% - 18px));
  background-repeat:no-repeat;
}

<div class='squareLoader'></div>

Answer 3

• Сделать squareLoader относительным родителем
• Позиционировать элемент в углах, используя translate, top, left
• Делить стили везде, где это возможно
• Сохранение значения повторного смещения в CSS переменная

:root {
  --offset: -1.4em;
}

body {
  background-color: #de4e40;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  margin: 0;
  display: flex;
}

.squareLoader {
  height: 200px;
  width: 200px;
  background-color: white;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
}

.squareLoader img {
  position: absolute;
  width: 50px;
}


.one, .three {
  left: 50%;
  transform: translateX(-50%);
}

.two, .four {
  top: 50%;
  transform: translateY(-50%);
}

.one {
  top: var(--offset);
}

.two {
  right: var(--offset);
}

.three {
  bottom: var(--offset);
}

.four {
  left: var(--offset);
}

<div class="squareLoader">
  <img src="https://image.flaticon.com/icons/svg/190/190675.svg" alt="" class="one">
  <img src="https://image.flaticon.com/icons/svg/190/190675.svg" alt="" class="two">
  <img src="https://image.flaticon.com/icons/svg/190/190675.svg" alt="" class="three">
  <img src="https://image.flaticon.com/icons/svg/190/190675.svg" alt="" class="four">
</div>

https://jsfiddle.net/uf2t5p6r/3/