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

Question

我正在用婴儿的动画脸做一些CSS动画，我试图将嘴设为特定的笑脸形状。 我需要的形状看起来像这样。记下左上角和右上角，它们是圆形的：

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

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

Flink建议在评论中添加圈子，所以我尝试了，虽然不完美但它可能是最好的选择。我用圈子编辑了下面的小提琴。如果有人有更好的选择或更好地做到这一点，那么请让我知道/发布答案：

JSFiddle

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

以下是一个例子：

.half-circle {
    height:150px;
    width: 75px;
    position: absolute;
    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);
}
.half-circle:before, .half-circle:after{
    content: "";
    width: 10px;
    height: 20px;
    position: absolute;
    left: 99%;
    top: -20px;
    background: #000;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.half-circle:after{
  bottom:-20px;
  top: inherit;
}

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

JSFIDDLE LINK

Answer 3

通过更改0 0中的border-radius，我能够绕过外围 半圈的两侧。如果/当我弄明白时，我会编辑 内部。

注意：我知道这不是完整的答案，但可能会让您走上正确的道路。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;