前端 - css如何畫一個半圓?
問題描述
我寫的demo 在這https://jsfiddle.net/yye46hgy/,怎樣才能得到如圖的效果呢?(而且不能定寬定高,做成自適應)
問題解答
回答1:分別設置border-radius的水平和垂直半徑就行了吧。需要做些數學運算,可以用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的盒子
畫半圓的思路和三角形差不多
相關文章:
1. mysql日期類型默認值’0000-00-00’ 報錯2. 求救一下,用新版的phpstudy,數據庫過段時間會消失是什么情況?3. mysql replace 死鎖4. mysql - C#連接數據庫時一直這一句出問題int i = cmd.ExecuteNonQuery();5. MYSQL 根據兩個字段值查詢 但兩個值的位置可能是互換的,這個怎么查?6. extra沒有加載出來7. android - 安卓做前端,PHP做后臺服務器 有什么需要注意的?8. javascript - 微信網頁開發從菜單進入頁面后,按返回鍵沒有關閉瀏覽器而是刷新當前頁面,求解決?9. php傳對應的id值為什么傳不了啊有木有大神會的看我下方截圖10. mysql - ubuntu開啟3306端口失敗,有什么辦法可以解決?
