当高度和宽度是百分比时，如何用 CSS 绘制半圆？ [复制]答案

【问题标题】：How do I draw a semicircle with CSS when the height and width are percentages? [duplicate]当高度和宽度是百分比时，如何用 CSS 绘制半圆？ [复制]
【发布时间】：2021-03-03 17:04:43
【问题描述】：

高宽都是百分比时如何用CSS画半圆？

.container{
  width: 200px;
  height: 200px;
  background: blue;
  display: flex;
}

.semiCircle{
  position:relative;
  height: 90%;
  width: 45%;
  border-radius: 90% 0 0 90%;
  background: red;
  margin:auto;
}

<div class='container'>
  <div class='semiCircle'></div>
</div>

【问题讨论】：

你的意思是高宽不相等？
在边界半径中只需使用90px 0 0 90px

标签： html css

【解决方案1】：

首先，用border-radius: 100%; 创建一个圈子。然后，使用background: linear-gradient(90deg, red 50%, transparent 50%); 使其一半透明。

.container {
  width: 200px;
  height: 200px;
  background: blue;
  display: flex;
}
.semiCircle {
  height: 90%;
  width: 45%;
  border-radius: 100%;
  margin: auto;
  background: linear-gradient(90deg, red 50%, transparent 50%);
}

<div class='container'>
  <div class='semiCircle'></div>
</div>

【讨论】：

【解决方案2】：

在 CSS 代码中，我添加了这样的 CSS：

height: 50%;
width: 100%;
background-color: red;
border-top-left-radius: 110px;
border-top-right-radius: 110px;
transform: rotate(-90deg);

示例：

.container{
  width: 200px;
  height: 200px;
  background: blue;
  display: flex;
}

.semiCircle{
    height: 50%;
  width: 100%;
    background-color: red;
    border-top-left-radius: 110px;
    border-top-right-radius: 110px;
    transform: rotate(-90deg);
    position:relative;
    margin:auto;
}

<div class='container'>
  <div class='semiCircle'></div>
</div>

【讨论】：