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

Question

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

Answer 1

Just set the horizontal and vertical radius of border-radius respectively.
You need to do some mathematical operations, you can use sass or 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

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

Method 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 and height are 0
border box with thickness xx px

The idea of ​​drawing a semicircle is similar to that of a triangle