html - 我们可以在 css 中创建一个像圆弧一样的半月吗？

Question

我正在尝试创建如下所示的图像弧。我能够制作半圆，但我不确定如何使圆弧的中心更厚，外侧更薄。

或者我应该使用圆弧的图像。

圆弧样式:

Answer 1

使用伪元素很容易做到这一点。

要使其末端更细，请将边框宽度在除右侧以外的所有一侧设置为 0。

body {
  background: black;
}

div {
  position: relative;
  display: inline-block;
  font-size: 30px;
  color: lightgreen;
  margin: 40px;
}
div::after {
  content: '';
  position: absolute;
  right: -20px;
  top: -30px;
  height: 100px;
  width: 80px;
  border-radius: 50%;
  border: 0 solid lightgreen;
  border-width: 0 5px 0 0;
}

<div>JK</div>