主页 / 问题 / 1539530
Accepted
IvanNaStackOF
Asked:2023-09-07 23:10:06 +0000 UTC2023-09-07 23:10:06 +0000 UTC

将元素排列在圆上

  • 772

参考了别人的代码（我已经找不到源代码了）。我想将元素排列在一个圆圈上，以便“圆圈”在圆圈上均匀分布，并且在添加带有每个描述的文本块时不会移动（现在“圆圈”根据文本量而移动）在相邻的块中，这很糟糕）。我正在尝试仅使用 CSS 来实现它。

我请求实施方面的帮助！ https://codepen.io/IvanVGitHub/pen/OJrXvOM

.cards_wrapper {
  position: relative;
  height: 485px; width: 485px;
  font: bold 11px/1em "Arial", sans-serif;
  background-image: radial-gradient( circle at center, #fff0 53px, #fff 54px, #fff 57px, #abd2ee 58px, #abd2ee 60px, #fff 61px, #fff 106px, #d5e1ec 107px, #d5e1ec 143px, #fff0 144px, #fff0 169px, #d5e1ec 170px, #d5e1ec 172px, #fff0 173px), url(https://thispersondoesnotexist.com/image);
  background-position: 0 0, center;
  background-size: auto, 110px;
  background-repeat: no-repeat;
}

.cards_wrapper::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 66px);
  height: calc(100% - 66px);
  box-sizing: border-box;
  border-radius: 50%;
  border: 3px dashed #d5e1ec;
}

.cards_wrapper::after {
  content: "центр Вселенной";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -85px);
  padding: 6px 12px;
  box-sizing: border-box;
  border-radius: 4px;
  background-color: #4facf1;
  color: #fff;
}

.angle_wrapper {
  position: absolute;
  left: calc(50% - 50px);
  height: 50%;
  transform-origin: 50% 100%;
}
.angle_wrapper:nth-child(1) { transform: rotate(30deg); }
.angle_wrapper:nth-child(2) { transform: rotate(90deg); }
.angle_wrapper:nth-child(3) { transform: rotate(150deg); }
.angle_wrapper:nth-child(4) { transform: rotate(210deg); }
.angle_wrapper:nth-child(5) { transform: rotate(270deg); }
.angle_wrapper:nth-child(6) { transform: rotate(330deg); }

.card {
  position: relative;
  display: flex;
  flex-flow: row;
  justify-content: start;
  align-items: center;
  text-align: center;
  height: 100px; width: 100px;
  transform-origin: 50% 33px;
}
.card img p {
  display:flex, align-items:center,gap:20px
}

.angle_wrapper:nth-child(1) .card { transform: rotate(-30deg); }
.angle_wrapper:nth-child(2) .card { transform: rotate(-90deg); }
.angle_wrapper:nth-child(3) .card { transform: rotate(-150deg); }
.angle_wrapper:nth-child(4) .card { transform: rotate(-210deg); }
.angle_wrapper:nth-child(5) .card { transform: rotate(-270deg); }
.angle_wrapper:nth-child(6) .card { transform: rotate(-330deg); }

.card_img {
  width: 66px; height: 66px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 3px solid #d5e1ec;
}

.card_title, .card_rating {
  margin: 0;
  color: #696d78;
}

.card_rating {
  position: absolute;
  top: 0; right: 0;
  padding: 4px;
  border-radius: 4px;
  background-color: #abd2ee;
}
<section class="cards">
  <div class="container">
    <div class="cards_wrapper">
    
      <div class="angle_wrapper">
        <div class="card">
          <img class="card_img" src="https://onlinetools.com/images/examples-onlineimagetools/color-grid.png" alt="">
          <h4 class="card_title">Иванов Иван</h4>
          <!--           <p class="card_rating">★ 4.9</p> -->
        </div>
      </div>

      <div class="angle_wrapper">
        <div class="card">
          <img class="card_img" src="https://onlinetools.com/images/examples-onlineimagetools/color-grid.png" alt="">
          <h4 class="card_title">Константинов Константин</h4>
          <!--           <p class="card_rating">★ 4.9</p> -->
        </div>
      </div>

      <div class="angle_wrapper">
        <div class="card">
          <img class="card_img" src="https://onlinetools.com/images/examples-onlineimagetools/color-grid.png" alt="">
          <h4 class="card_title">Машина Маша</h4>
          <!--           <p class="card_rating">★ 4.9</p> -->
        </div>
      </div>

      <div class="angle_wrapper">
        <div class="card">
          <h4 class="card_title">Надина Надежда</h4>
          <img class="card_img" src="https://onlinetools.com/images/examples-onlineimagetools/color-grid.png" alt="">
          <!--           <p class="card_rating">★ 4.9</p> -->
        </div>
      </div>

      <div class="angle_wrapper">
        <div class="card">
          <h4 class="card_title">Петров Пётр</h4>
          <img class="card_img" src="https://onlinetools.com/images/examples-onlineimagetools/color-grid.png" alt="">
          <!--           <p class="card_rating">★ 4.9</p> -->
        </div>
      </div>

      <div class="angle_wrapper">
        <div class="card">
          <h4 class="card_title">blablablablablablabla</h4>
          <img class="card_img" src="https://onlinetools.com/images/examples-onlineimagetools/color-grid.png" alt="">
          <!--           <p class="card_rating">★ 4.9</p> -->
        </div>
      </div>

    </div>
  </div>
</section>

现在是什么样子

现在是什么样子

html

1 个回答

  1. Best Answer

    当然，如果我理解正确的话，那么是这样的：

    .cards_wrapper {
  position: relative;
  height: 485px; width: 485px;
  font: bold 11px/1em "Arial", sans-serif;
  background-image: radial-gradient( circle at center, #fff0 53px, #fff 54px, #fff 57px, #abd2ee 58px, #abd2ee 60px, #fff 61px, #fff 106px, #d5e1ec 107px, #d5e1ec 143px, #fff0 144px, #fff0 169px, #d5e1ec 170px, #d5e1ec 172px, #fff0 173px), url(https://thispersondoesnotexist.com/image);
  background-position: 0 0, center;
  background-size: auto, 110px;
  background-repeat: no-repeat;
}

.cards_wrapper::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 66px);
  height: calc(100% - 66px);
  box-sizing: border-box;
  border-radius: 50%;
  border: 3px dashed #d5e1ec;
}

.cards_wrapper::after {
  content: "ВАШ САЙТ";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -85px);
  padding: 6px 12px;
  box-sizing: border-box;
  border-radius: 4px;
  background-color: #4facf1;
  color: #fff;
}

.angle_wrapper {
  position: absolute;
  left: calc(50% - 50px);
  height: 50%;
  transform-origin: 50% 100%;
}
.angle_wrapper:nth-child(2) { transform: rotate(60deg); }
.angle_wrapper:nth-child(3) { transform: rotate(120deg); }
.angle_wrapper:nth-child(4) { transform: rotate(180deg); }
.angle_wrapper:nth-child(5) { transform: rotate(240deg); }
.angle_wrapper:nth-child(6) { transform: rotate(300deg); }

.card {
  position: relative;
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100px; width: 100px;
  transform-origin: 50% 50%;
}
.card_container {
  width: fit-content;
  height: fit-content;
  position: relative;
}

.card_title {
  position: absolute;
  left: calc(100% + 5px);
  height: 100%;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card img p {
  display:flex, align-items:center,gap:20px
}

.angle_wrapper:nth-child(2) .card { transform: rotate(-60deg); }
.angle_wrapper:nth-child(3) .card { transform: rotate(-120deg); }
.angle_wrapper:nth-child(4) .card { transform: rotate(-180deg); }
.angle_wrapper:nth-child(5) .card { transform: rotate(-240deg); }
.angle_wrapper:nth-child(6) .card { transform: rotate(-300deg); }

.card_img {
  width: 66px; height: 66px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 3px solid #d5e1ec;
}

.card_title, .card_rating {
  margin: 0;
  color: #696d78;
}

.card_rating {
  position: absolute;
  top: 0; right: 0;
  padding: 4px;
  border-radius: 4px;
  background-color: #abd2ee;
}
    <section class="cards">
  <div class="container">
    <div class="cards_wrapper">

      <div class="angle_wrapper">
        <div class="card">
          <div class="card_container">
            <img class="card_img" src="https://onlinetools.com/images/examples-onlineimagetools/color-grid.png" alt="">
            <h4 class="card_title">Иванов Сергей</h4>
  <!--           <p class="card_rating">★ 4.9</p> -->
          </div>
        </div>
      </div>

      <div class="angle_wrapper">
        <div class="card">
          <div class="card_container">
            <img class="card_img" src="https://onlinetools.com/images/examples-onlineimagetools/color-grid.png" alt="">
            <h4 class="card_title">Иванов Сергей</h4>
  <!--           <p class="card_rating">★ 4.9</p> -->
          </div>
        </div>
      </div>

      <div class="angle_wrapper">
        <div class="card">
          <div class="card_container">
            <img class="card_img" src="https://onlinetools.com/images/examples-onlineimagetools/color-grid.png" alt="">
            <h4 class="card_title">Рождественский Сергей</h4>
  <!--           <p class="card_rating">★ 4.9</p> -->
          </div>
        </div>
      </div>

      <div class="angle_wrapper">
        <div class="card">
          <div class="card_container">
            <img class="card_img" src="https://onlinetools.com/images/examples-onlineimagetools/color-grid.png" alt="">
            <h4 class="card_title">Иванов Сергей</h4>
  <!--           <p class="card_rating">★ 4.9</p> -->
          </div>
        </div>
      </div>

      <div class="angle_wrapper">
        <div class="card">
          <div class="card_container">
            <img class="card_img" src="https://onlinetools.com/images/examples-onlineimagetools/color-grid.png" alt="">
            <h4 class="card_title">Ким Ли</h4>
  <!--           <p class="card_rating">★ 4.9</p> -->
          </div>
        </div>
      </div>

      <div class="angle_wrapper">
        <div class="card">
          <div class="card_container">
            <img class="card_img" src="https://onlinetools.com/images/examples-onlineimagetools/color-grid.png" alt="">
            <h4 class="card_title">Иванов Сергей</h4>
  <!--           <p class="card_rating">★ 4.9</p> -->
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

    将所有与其所在位置相关的card所有东西都包裹在里面。我也做了同样的事card_containercard_titlecard justify-content: center;transform-origin: 50%, 50%;

    • 2

相关问题