css 将图像环绕/对齐在一个圆上

lyr7nygr 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(102)

我不确定我是否无法找到正确的搜索词，或者是否没有太多与此相关的内容，但我想知道是否有人可以帮助我弄清楚如何围绕圆形 Package 或对齐图像/元素。
我不确定是否有可能纯粹用HTML和CSS来做，或者是否需要JS，但我对所有建议都持开放态度。
这里有一个photoshop的例子，我在这里只显示了4个，但我需要添加更多的圆圈，并保持一致的能力。它可以去另一列，如果需要的话。
对于上下文，这将是某种类型的导航菜单。
x1c 0d1x的数据
下面是我的代码：

@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;
}

个字符

css

来源：https://stackoverflow.com/questions/68641366/wrapping-aligning-images-around-a-circle

1条答案

按热度按时间

q3aa05251#

将.icon-background设置为absolute，并将其设置为top bottom right left值。

.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;
}

个字符

/*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>

的字符串

赞(0）回复(0）举报 2024-01-09

我来回答

css 将图像环绕/对齐在一个圆上

1条答案

相关问题

热门标签

最新问答