Wrapping/Aligning Images Around a Circle

Question

I'm not sure if I'm unable to find the right term to search or if there isn't much out there relating to this, but I was wondering if someone could help me figure out how to wrap or align images/elements around a circular shape.

I'm not sure if it's possible to do it purely with HTML and CSS or if JS is needed, but I'm open to all suggestions.

Here's an example in photoshop of what I'm looking for. I only show 4 here, but I will need the ability to add more circles as needed and still remain consistent. It could go onto another column though, if necessary.

for context, this is going to be some type of navigation menu.

Here's what I have code wise:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

/*Colours:*/
:root {
    --dark: #16161a;
    --off-dark: #242629;
    --off-white: #fffffe;
    --purple: #7f5af0;
    --off-blue: #94a1b2;
}

body {
    color: var(--off-white);
    font-family: 'Roboto', sans-serif;
}

.create-icon-size {
    font-size: 1.5rem;
}

.circle-wrap {
    position: relative;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 320px;
    border: 5px solid var(--off-dark);
    border-radius: 160px;
    transform: translate(-50%, -50%);
}

.icon-background {
    background-color: var(--purple);
    color: var(--off-dark);
    position: relative;
    border-radius: 25px;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

<html lang="en" class="html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css" type="text/css">
    <script src="https://kit.fontawesome.com/fcb91982ab.js" crossorigin="anonymous"></script>
    <title>Document</title>
</head>
<body>
        <div class="circle-wrap">
            <div id="head" class="icon-background">
                <span class="fas fa-meh-blank create-icon-size"></span>
            </div>
            <div id="body" class="icon-background">
                <span class="fas fa-child create-icon-size"></span>
            </div>
            <div id="legs" class="icon-background">
                <span class="fas fa-capsules create-icon-size"></span>
            </div>
            <div id="feet" class="icon-background">
                <span class="fas fa-shoe-prints create-icon-size"></span>
            </div>
    </div>
</body>
</html>

https://stackoverflow.com/questions/10152390/dynamically-arrange-some-elements-around-a-circle — Paulie_D, Aug 03 '21 at 19:12
https://stackoverflow.com/questions/39020670/rotate-objects-around-circle-using-css — Paulie_D, Aug 03 '21 at 19:12

score 1 · Answer 1 · answered Aug 03 '21 at 20:06

make .icon-background to absolute, and set it with top bottom right left values.

.main {
  position: relative;
  width: 400px;
}
.big-img {
  height: 400px;
  width: 400px;
  border-radius: 100%;
}
.sm-img {
  position: absolute;
  height: 80px;
  width: 80px;
  border-radius: 100%;
  border: 5px solid #fff;
}
.one {
  top: 0;
  right: 0;
}
.two {
  top: 100px;
  right: -50px;
}
.three {
  bottom: 100px;
  right: -50px;
}
.four {
  bottom: 0;
  right: 0;
}

<div class="main">
  <img src="https://images.unsplash.com/photo-1525268499284-86ec700c826d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" class="big-img" alt="image-1">
  <img src="https://images.unsplash.com/photo-1525268499284-86ec700c826d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" class="sm-img one" alt="image-1">
  <img src="https://images.unsplash.com/photo-1525268499284-86ec700c826d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" class="sm-img two" alt="image-1">
  <img src="https://images.unsplash.com/photo-1525268499284-86ec700c826d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" class="sm-img three" alt="image-1">
  <img src="https://images.unsplash.com/photo-1525268499284-86ec700c826d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" class="sm-img four" alt="image-1">
</div>

/*Colours:*/
:root {
    --dark: #16161a;
    --off-dark: #242629;
    --off-white: #fffffe;
    --purple: #7f5af0;
    --off-blue: #94a1b2;
}

body {
    color: var(--off-white);
    font-family: 'Roboto', sans-serif;
}
.main{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}
.create-icon-size {
    font-size: 1.5rem;
}

.circle-wrap {
    position: relative;
    width: 320px;
    height: 320px;
    border: 5px solid var(--off-dark);
    border-radius: 160px;
}

.icon-background {
    background-color: var(--purple);
    color: var(--off-dark);
    position: absolute;
    border-radius: 25px;
    width: 50px;
    height: 50px;
}
#head{
  top:0;
  right: 25px;
}
#body{
  top: 80px;
  right: -25px;
}
#legs{
  bottom: 80px;
  right: -25px;
}
#feet{
  bottom:0;
  right: 25px;

<div class="main"><div class="circle-wrap">
            <div id="head" class="icon-background">
                <span class="fas fa-meh-blank create-icon-size"></span>
            </div>
            <div id="body" class="icon-background">
                <span class="fas fa-child create-icon-size"></span>
            </div>
            <div id="legs" class="icon-background">
                <span class="fas fa-capsules create-icon-size"></span>
            </div>
            <div id="feet" class="icon-background">
                <span class="fas fa-shoe-prints create-icon-size"></span>
            </div>
  </div></div>

Wrapping/Aligning Images Around a Circle

1 Answers1