半圈与CSS中的百分比

Question

我正在尝试使用带有百分比的border-radius创建一个带有CSS的半圈，但我没有任何想法。有没有办法这样做？

Answer 1

尝试按照以下方式设置 div 的样式：

div{
 height:45px;
 width:90px;
 border-radius: 90px 90px 0 0;
 -moz-border-radius: 90px 90px 0 0;
 -webkit-border-radius: 90px 90px 0 0;
 background:green; }

这会创建一个半绿色的圆圈，希望对你有用。

Answer 2

听起来你想要使用百分比，如果是这样，容器需要固定大小和截止溢出。

如果你有HTML：

<div class="container"><div class="pie"></div></div>

然后这个CSS将起作用：

.container {
    height: 45px;
    width: 90px;
    overflow: hidden;
}
.pie {
     height: 200%;
     width: 100%;
     border-radius: 100% 100% 0 0;
     background: green;
}