html - 在 CSS 中制作带有圆边的微笑/马蹄形/半圆

Question

我正在用一张婴儿的动画脸制作一些 CSS 动画，我正在尝试将嘴巴创建为特定的微笑形状。 我需要的形状看起来像这样。注意左上角和右上角的圆 Angular :

你可以看到我到这里最近的。唯一缺少的是圆滑的左上角和右上角边缘。

.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>

*Edit 到目前为止提交的答案还不够好，所以不幸的是我不得不改用位图。如果将来有人找到更好的解决方案，请提供答案，如果它能正常工作，我会将其标记为已接受。

Answer 1

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

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>