Половина круга с процентом в CSS

Question

Я пытаюсь создать половину круга с 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; 
}