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

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

通过改变border-radius的0 0 ，我能够绕半圆的外侧。 如果/当我弄清楚内部时，我会编辑。

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

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

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