前端 - css如何畫一個半圓？

問題描述

我寫的demo 在這https://jsfiddle.net/yye46hgy/，怎樣才能得到如圖的效果呢？（而且不能定寬定高，做成自適應）

問題解答

分別設置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/

方法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的盒子

畫半圓的思路和三角形差不多