前端 - css如何畫一個(gè)半圓?
問(wèn)題描述
我寫的demo 在這https://jsfiddle.net/yye46hgy/,怎樣才能得到如圖的效果呢?(而且不能定寬定高,做成自適應(yīng))
問(wèn)題解答
回答1:分別設(shè)置border-radius的水平和垂直半徑就行了吧。需要做些數(shù)學(xué)運(yùn)算,可以用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>立即申請(qǐng)</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. javascript - immutable配合react提升性能?2. javascript - sublime快鍵鍵問(wèn)題3. javascript - nodejs關(guān)于進(jìn)程間發(fā)送句柄的一點(diǎn)疑問(wèn)4. Apache 已經(jīng)把網(wǎng)站根目錄的改為allow from all了,但是服務(wù)器還是不能訪問(wèn)?5. 實(shí)現(xiàn)bing搜索工具urlAPI提交6. javascript - 移動(dòng)端上不能實(shí)現(xiàn)拖拽布局嗎?7. vue.js - Vue 如何像Angular.js watch 一樣監(jiān)聽(tīng)數(shù)據(jù)變化8. phpstudy8.1支持win11系統(tǒng)嗎?9. 配置Apache時(shí),添加對(duì)PHP的支持時(shí)語(yǔ)法錯(cuò)誤10. css - 寫頁(yè)面遇到個(gè)布局問(wèn)題,求大佬們幫解答,在線等,急!~

網(wǎng)公網(wǎng)安備