CSS弧形这么写出来

Question

这种上面的弧形应该这么用CSS写 只能用背景图代替吗

Answer 1

给你个思路

Answer 2

border-radius: 150px/30px 30px 0px 0px;

Answer 3

<div class="father">
    <div class="mouth"></div>
</div>
.father{
    height: 50px;
    width: 100px;
    overflow: hidden;
}
.mouth {
     border-radius: 100px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: black;
    width: 100px;
    height: 100px;
}

Answer 4

我觉得用SVG更好

Answer 5

用canvas可以画二次、三次贝塞尔曲线。

Answer 6

demo：链接描述