使用css画个镰刀形的月亮

.crescent-moon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: gold;
  position: relative;
  overflow: hidden; /* 关键：隐藏溢出部分 */
}

.crescent-moon::before {
  content: '';
  position: absolute;
  right: 0; /* 定位到右边 */
  top: 0;
  width: 60px; /* 调整这个值控制月亮的形状 */
  height: 100px;
  background-color: #001a33; /*  深蓝色或黑色背景 */
  border-radius: 50%;
}


/*  以下代码可选，用于添加阴影效果，使月亮更逼真  */
.crescent-moon::after {
  content: '';
  position: absolute;
  right: 5px; /*  调整阴影位置  */
  top: 5px; /*  调整阴影位置  */
  width: 50px; /*  略小于遮罩  */
  height: 90px; /*  略小于遮罩  */
  background-color: rgba(0, 26, 51, 0.5); /*  半透明深色  */
  border-radius: 50%;
  filter: blur(5px); /*  模糊阴影  */
  z-index: -1; /*  将阴影置于月亮之后  */
}

HTML:

<div class="crescent-moon"></div>

解释:

1. .crescent-moon: 这是主要的月亮容器。border-radius: 50%; 将其变成一个圆形。 overflow: hidden; 非常重要，它会隐藏溢出容器的部分，从而创建出月亮的形状。

2. .crescent-moon::before: 这是创建遮罩的关键。它是一个伪元素，定位在月亮容器的右侧。通过调整 width 值，可以控制月亮的弯曲程度。较小的宽度会使月亮更弯曲，像新月。较大的宽度会使月亮更饱满。

3. .crescent-moon::after (可选): 这个伪元素添加了阴影效果。它是一个略小于遮罩的半透明圆，并使用 filter: blur(5px); 进行模糊处理，使阴影看起来更柔和。z-index: -1; 确保阴影位于月亮后面。

如何调整月亮的形状:

• width of ::before: 控制月亮的弯曲程度 (新月 vs. 接近满月)。
• background-color of ::before: 遮罩的颜色，通常是深蓝色或黑色，代表夜空。
• right and top of ::before: 微调遮罩的位置。

如何调整阴影:

• right, top, width, and height of ::after: 控制阴影的位置和大小。
• background-color of ::after: 阴影的颜色和透明度.
• filter: blur() of ::after: 阴影的模糊程度.

这个方法使用 CSS 创建一个简单的镰刀形月亮。您可以根据需要调整 CSS 属性来改变月亮的外观。 希望这个解释对您有所帮助!