前端 - css如何画一个半圆？

Question

我写的demo 在这https://jsfiddle.net/yye46hgy/，
怎样才能得到如图的效果呢？（而且不能定宽定高，做成自适应）

Answer 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>

Answer 2

https://jsfiddle.net/yye46hgy/2/

Answer 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%;
}

方法2
html

<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;
}

Answer 4

width和height为0
border厚度为xx px的盒子

画半圆的思路和三角形差不多