【CSS】css如何画一个半圆？

• Z时代
• 2024-01-10
• 分类：技术分享

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

回答：

分别设置border-radius的水平和垂直半径就行了吧。
需要做些数学运算，可以用sass或less。

<style>
    div {
        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>
<div>立即申请</div>

回答：

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

回答：

方法1:
html

<div class="half-circle">
</div>

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

<div class="half-circle">
    <div class="inner-circle">
    </div>
</div>

css

.half-circle{
  width:200px;
  height:100px;
  overflow:hidden;
}
.inner-circle{
  width:200px;
  height:200px;
  border-radius:50%;
  background-color:purple;
}

回答：

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

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

以上是 【CSS】css如何画一个半圆？ 的全部内容， 来源链接： utcz.com/a/155315.html