鍍金池/ 問(wèn)答/HTML/ CSS弧形這么寫(xiě)出來(lái)

CSS弧形這么寫(xiě)出來(lái)

這種上面的弧形應(yīng)該這么用CSS寫(xiě) 只能用背景圖代替嗎

clipboard.png

回答
編輯回答
念舊

clipboard.png

<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;
}
2018年6月12日 03:54
編輯回答
筱饞貓

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

2017年7月4日 14:54
編輯回答
吢涼

demo：鏈接描述

2017年11月20日 18:29
編輯回答
浪蕩不羈

我覺(jué)得用SVG更好

2017年5月4日 21:00
編輯回答
久礙你

用canvas可以畫(huà)二次、三次貝塞爾曲線。

2017年6月16日 17:56
編輯回答
爆扎

給你個(gè)思路

圖片描述

2017年8月20日 14:41