如何使用纯CSS实现拉伸弧线，用于制作时钟笑脸效果？

我想要为我的时钟制作笑脸效果，但是卡在了弧线实现环节。
我参考过使用box-shadow实现的方案，请问是否可以通过线条方式制作月牙形状？
我搜索了很多相关问题，发现几乎都使用半圆实现，无法做出像弧线那样的拉伸效果。
请问如何使用纯CSS实现下图所示的弧线效果？不接受SVG或Canvas方案，感谢帮助。
我知道图中有多处弧线，只需要给出一个示例即可，其余位置的弧线我可以自行调整定位。

现有代码片段1 #

现有实现的CSS代码如下：

#clockStyleCircle{
    position: absolute;
    width: 16vw;
    height: 16vw;
    text-align: center;
    padding: 0%;
    top: 28.5%;
    left: 28.5%;
    border-radius: 50%;
    border: 3px solid black;
    background-color: rgb(255, 233, 35);
}
#clockStyleEyeCircle1{
    position: absolute;
    width: 4vw;
    height: 4vw;
    top: 24%;
    left: 10%;
    border: 3px solid black;
    border-radius: 50%;
    box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86); /* inset 16px 0px #777, inset 16px 0px 1px 2px #777;*/
    background-color: black;
}
#clockStyleEyeCircle2{
    position: absolute;
    width: 4vw;
    height: 4vw;
    top: 24%;
    left: 65%;
    border: 3px solid black;
    border-radius: 50%;
    box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
    background-color: black;
}
#clockStyleSimileCircle{
    position: absolute;
    width: 8vw;
    height: 3vw;
    top: 68%;
    left: 25%;
    border: 3px solid rgb(36, 36, 36);
    /* border-radius: 0 0 50% 50% /  0 0 100% 100%; */
    border-bottom-left-radius: 100% 200%;
    border-bottom-right-radius: 100% 200%;
    background-color: black;
    box-shadow:  inset 16px 0px #777, inset 16px 0px 1px 2px #777;;
}

对应HTML代码：

<div id="clockStyleCircle">
  <div id="clockStyleEyeCircle1">
    <div id="clockStyleEyeSmallCircle1"></div>
  </div>
  <div id="clockStyleEyeCircle2">
    <div id="clockStyleEyeSmallCircle2"></div>
  </div>
  <div id="clockStyleSimileCircle"></div>
</div>

参考方案调整后，眼睛效果已经符合预期，但是如上面的代码片段所示，嘴巴形状是通过阴影渲染的。因此我做了第二版调整，调整后可以看到弧线没有拉伸效果，且为了实现效果隐藏了边框。请问是否可以用纯CSS实现弧线效果？

现有代码片段2 #

第二版CSS代码：

#clockStyleCircle {
  position: absolute;
  width: 16vw;
  height: 16vw;
  text-align: center;
  padding: 0%;
  top: 28.5%;
  left: 28.5%;
  border-radius: 50%;
  border: 3px solid black;
  background-color: rgb(255, 233, 35);
}

#clockStyleEyeCircle1 {
  position: absolute;
  width: 4vw;
  height: 4vw;
  top: 24%;
  left: 10%;
  border: 3px solid black;
  border-radius: 50%;
  box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
  /* inset 16px 0px #777, inset 16px 0px 1px 2px #777;*/
  background-color: black;
}

#clockStyleEyeCircle2 {
  position: absolute;
  width: 4vw;
  height: 4vw;
  top: 24%;
  left: 65%;
  border: 3px solid black;
  border-radius: 50%;
  box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
  background-color: black;
}

#clockStyleSimileCircle {
  position: absolute;
  width: 6vw;
  height: 6vw;
  top: 45%;
  left: 30%;
  border: 3px solid transparent;
  border-radius: 150px;
  /* border-radius: 0 0 50% 50% / 0 0 100% 100%; */
  /* border-bottom-left-radius: 100% 200%; */
  /* border-bottom-right-radius: 100% 200%; */
  background-color: transparent;
  box-shadow: inset 0px -9px 1px -2px #777;
}
#clockStyleSmileSmallCircle2 {
 position: absolute;
    width: 1vw;
    height: 2vw;
    top: 76%;
    left: 30%;
    border: 3px solid transparent;
    border-radius: 150px;
    /* border-radius: 0 0 50% 50% / 0 0 100% 100%; */
    /* border-bottom-left-radius: 100% 200%; */
    /* border-bottom-right-radius: 100% 200%; */
    background-color: transparent;
    box-shadow: inset 0px 9px 1px -3px red;
}

第二版HTML代码：

<div id="clockStyleCircle">
  <div id="clockStyleEyeCircle1">
    <div id="clockStyleEyeSmallCircle1"></div>
  </div>
  <div id="clockStyleEyeCircle2">
    <div id="clockStyleEyeSmallCircle2"></div>
  </div>
  <div id="clockStyleSimileCircle"><div id="clockStyleSmileSmallCircle2"></div></div>
</div>

可以用纯CSS实现拉伸弧线效果，核心思路是通过单侧边框+不对称border-radius实现，不需要依赖阴影，调整参数就能自由控制弧线的粗细、弧度、拉伸程度。
下面给出修改后的示例代码，以嘴巴弧线为例，其余代码保持不变：

#clockStyleSimileCircle {
  position: absolute;
  width: 8vw; /* 控制弧线的水平长度 */
  height: 4vw; /* 控制弧线的垂直高度，比例越大弧线越平缓 */
  top: 60%;
  left: 25%;
  border: 0;
  /* 仅保留下边框，边框粗细就是弧线的粗细 */
  border-bottom: 4px solid #777;
  /* 不对称圆角，下半部分拉满形成圆弧，上半部分圆角为0 */
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background-color: transparent;
  box-shadow: none;
}

如果要实现更细的月牙形弧线，可以调整border-radius的比例和边框方向，示例如下：

/* 月牙形小弧线示例 */
.small-arc {
  width: 2vw;
  height: 3vw;
  border-left: 2px solid red;
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
  background: transparent;
}

这种方案的弧线是实际的边框，不是阴影，显示效果更清晰，不会出现模糊问题；调整宽高比、边框位置、border-radius参数就能自由控制弧线的拉伸程度、弧度方向，不需要额外嵌套DOM元素，代码更简洁。

内容的提问来源于stack exchange，提问作者Yupma