圆形 div css 的一侧

圆形 div 在前端开发中经常被使用，特别是在 UI 设计和动画效果实现中。我们可以使用 CSS 来轻松地创建具有圆形形状的 div 元素。在本文中，我们将学习如何创建一个圆形 div 并将其分割成两个部分。

圆形 div

创建圆形 div 可以使用 border-radius 属性，该属性可以使元素的边角变成圆形。

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

上述代码将创建一个宽高为 100 像素的圆形 div。

分割圆形 div

想要将圆形 div 分割成两个部分，可以使用伪元素来实现。

.circle {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}

.circle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: blue;
}

.circle::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: red;
}

上述代码将创建一个圆形 div 并将其分成左右两个部分。伪元素 before 和 after 分别代表圆形 div 左半部分和右半部分，其宽度为原来圆形 div 的一半，高度等于圆形 div 的高度，并设置了不同的背景颜色。

最后，我们需要将圆形 div 的 overflow 属性设置为 hidden，以便隐藏溢出的部分。

结论

通过使用 border-radius 属性和伪元素，我们可以轻松地创建具有圆形形状和分割效果的 div 元素。这种技术常常用于 UI 设计和动画效果实现中。