CSS3 实现 10 个 div 椭圆形排版 - 前端布局技巧

可以使用 CSS3 中的 transform 属性实现将 10 个 div 排成一个椭圆形。

HTML 代码：

<div class='container'>
  <div class='item'>1</div>
  <div class='item'>2</div>
  <div class='item'>3</div>
  <div class='item'>4</div>
  <div class='item'>5</div>
  <div class='item'>6</div>
  <div class='item'>7</div>
  <div class='item'>8</div>
  <div class='item'>9</div>
  <div class='item'>10</div>
</div>

CSS 代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
}

.item {
  width: 100px;
  height: 50px;
  background-color: #ddd;
  border-radius: 50%;
  position: absolute;
}
.item:nth-child(1) {
  transform: rotate(-20deg) translateX(250px) rotate(20deg);
}
.item:nth-child(2) {
  transform: rotate(-40deg) translateX(250px) rotate(40deg);
}
.item:nth-child(3) {
  transform: rotate(-60deg) translateX(250px) rotate(60deg);
}
.item:nth-child(4) {
  transform: rotate(-80deg) translateX(250px) rotate(80deg);
}
.item:nth-child(5) {
  transform: rotate(-100deg) translateX(250px) rotate(100deg);
}
.item:nth-child(6) {
  transform: rotate(-120deg) translateX(250px) rotate(120deg);
}
.item:nth-child(7) {
  transform: rotate(-140deg) translateX(250px) rotate(140deg);
}
.item:nth-child(8) {
  transform: rotate(-160deg) translateX(250px) rotate(160deg);
}
.item:nth-child(9) {
  transform: rotate(-180deg) translateX(250px) rotate(180deg);
}
.item:nth-child(10) {
  transform: rotate(-200deg) translateX(250px) rotate(200deg);
}

效果如下：