[分享]css两个圆连起来

在CSS中，使用border-radius属性可以制作出圆形。但是如果要制作两个圆连接在一起，就需要进行一些调整。

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
}

.half-circle {
  width: 50px;
  height: 100px;
  border-radius: 0 100px 100px 0;
  background-color: blue;
} 

这是我们所需要的两个基本样式：一个红色的圆形和一个蓝色的半圆形。接下来，使用CSS定位这些元素来制作连接的形状。

.container {
  position: relative;
  width: 150px;
  height: 100px;
}

.half-circle {
  position: absolute;
  right: 0;
  top: 0;
}

.circle {
  position: absolute;
  left: 0;
  top: 0;
} 

我们创建了一个容器元素，并将其定位为相对。然后，在其中分别嵌套红色圆和蓝色半圆形，并使用position: absolute;将它们定位到左右两侧。此时，两个元素会重叠在一起，效果并不是我们所期望的。

.half-circle {
  /* ... */
  transform: translateX(50%);
}

.circle {
  /* ... */
  transform: translateX(-50%);
} 

使用transform: translateX();属性让圆形和半圆形分别向左右移动一半，重合在容器中间，形成一个完整的形状。

现在你已经掌握了CSS制作连接圆形的技巧。以下是完整的代码示例：

.container {
  position: relative;
  width: 150px;
  height: 100px;
}

.circle {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  left: 0;
  top: 0;
  transform: translateX(-50%);
}

.half-circle {
  position: absolute;
  width: 50px;
  height: 100px;
  border-radius: 0 100px 100px 0;
  background-color: blue;
  right: 0;
  top: 0;
  transform: translateX(50%);
}