Как сделать круг в css?

Пользователь

от patrick.little , в категории: HTML/CSS , 3 года назад

Как сделать круг в css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от anahi_abshire , 3 года назад

Делаем круг в CSS так:


Для HTML создаем:

1
2
3
<body>
    <div id="circle"> </div>
</body>


Для CSS создаем:

1
2
3
4
5
6
#circle {
    height: 100px;
    width: 100px;
    border-radius: 50px;
    background-color: crimson;
}


Пользователь

от hoyt.jerde , год назад

@patrick.little 

Чтобы создать круг в CSS, вы можете использовать свойство border-radius. Чтобы создать круг, нужно установить радиус скругления у всех углов одинаковым, например:

1
2
3
4
5
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}


Это свойство может принимать значение в пикселях, процентах или единицах измерения em. Если вы хотите, чтобы круг был не полностью круглым, вы можете установить разные значения радиуса скругления для разных углов. Например:

1
2
3
4
5
.oval {
  width: 200px;
  height: 100px;
  border-radius: 100px/50px;
}


Это создаст эллипс, потому что радиус скругления по горизонтали будет больше, чем по вертикали. Вы также можете устанавливать разные значения радиуса скругления для каждого угла отдельно, используя свойства border-top-left-radius, border-top-right-radius, border-bottom-right-radius и border-bottom-left-radius.


Надеюсь, это помогло!