前端 - css如何畫一個半圓?
問題描述
我寫的demo 在這https://jsfiddle.net/yye46hgy/,怎樣才能得到如圖的效果呢?(而且不能定寬定高,做成自適應(yīng))
問題解答
回答1:分別設(shè)置border-radius的水平和垂直半徑就行了吧。需要做些數(shù)學(xué)運算,可以用sass或less。
<style> p {width: 5em;height: 1em;padding: 0.6em 0 0.2em 0;/* 水平半徑 = width/2, 垂直半徑 = height + padding */border-radius: 2.5em 2.5em 0 0/1.8em 1.8em 0 0;background-color: #f29900;color: #fff;text-align: center;font-size: 1.6rem; }</style><p>立即申請</p>回答2:
https://jsfiddle.net/yye46hgy/2/
回答3:方法1:html
<p class='half-circle'> </p>
css
.half-circle{ width:0px; height:0px; border-width:100px; border-style:solid; border-color:violet violet transparent transparent; background-color:transparent; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); border-radius:50%;}
方法2html
<p class='half-circle'> <p class='inner-circle'> </p></p>
css
.half-circle{ width:200px; height:100px; overflow:hidden;}.inner-circle{ width:200px; height:200px; border-radius:50%; background-color:purple;}回答4:
width和height為0border厚度為xx px的盒子
畫半圓的思路和三角形差不多
相關(guān)文章:
1. python - scrapy url去重2. Python從URL中提取域名3. node.js - 微信小程序websocket連接問題4. python執(zhí)行cmd命令,怎么讓他執(zhí)行類似Ctrl+C效果將其結(jié)束命令?5. 實現(xiàn)bing搜索工具urlAPI提交6. Python中使用超長的List導(dǎo)致內(nèi)存占用過大7. python - Django有哪些成功項目?8. MySQL主鍵沖突時的更新操作和替換操作在功能上有什么差別(如圖)9. 數(shù)據(jù)庫 - Mysql的存儲過程真的是個坑!求助下面的存儲過程哪里錯啦,實在是找不到哪里的問題了。10. 鏈接圖片時,鏈接不成功
