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

概述我正在用一个婴儿的动画脸做一些CSS动画,我正在尝试创建一个特定的微笑形状的嘴. 我需要的形状看起来像这样.记下左上角和右上角,它们是圆形的： 你可以看到我最接近的地方.唯一缺少的是左上角和右上角. .half-circle { height:150px; width: 75px; border-radius: 150px 0 0 150px; border-top: 20px s 我正在用一个婴儿的动画脸做一些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 ></div>

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

解决方法 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 >  <div ></div>  <div ></div></div>

总结

以上是内存溢出为你收集整理的HTML – 在CSS中制作带圆角边缘的微笑/马蹄形/半圆形全部内容，希望文章能够帮你解决HTML – 在CSS中制作带圆角边缘的微笑/马蹄形/半圆形所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。