在CSS中制作带圆角边缘的微笑/马蹄形/半圆形

Question

我正在用一个婴儿的动画脸做一些CSS动画,我正在尝试创建一个特定的微笑形状的嘴.我需要的形状看起来像这样.记下左上角和右上角,它们是圆形的:

你可以看到我最接近的地方.唯一缺少的是左上角和右上角.

.half-circle {
  height:150px;
  width: 75px;
  border-radius: 150px 0 0 150px;
  border-top: 20px solid #000;
  border-left: 20px solid #000;
  border-bottom: 20px solid #000;
  transform: translate(100px) rotate(-90deg);
}

<div class="half-circle"></div>

*编辑到目前为止提交的答案还不够好,所以我不幸地不得不使用位图.如果有人在将来找到更好的解决方案,请提供答案,如果工作正常,我会将其标记为已接受.

Answer 1

Flink 建议在评论中添加圆圈，所以我尝试了它，虽然不完美，但它可能是最好的选择。我用圆圈编辑了下面的小提琴。如果有人有更好的选择或更好的方法，请告诉我/发布答案：

JSFiddle

.half-circle {
    height:150px;
    width: 75px;
    border-radius: 150px 0 0 150px;
    border-top: 20px solid #000;
    border-left: 20px solid #000;
    border-bottom: 20px solid #000;
    transform: translate(100px) rotate(-90deg);
    position: relative;
}
.border-circle {
  background-color: #000;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  position: absolute;
}
.left-circle {
  right: -8px;
  top: -20px;
}
.right-circle {
  bottom: -20px;
  right: -8px;
}

<div class="half-circle">
  <div class="border-circle left-circle"></div>
  <div class="border-circle right-circle"></div>
</div>