html — нужно нарисовать круг с помощью CSS, как это
Нужно нарисовать круг, на который я помещаю значок изображения, применяя CSS, как показано на рисунке ниже. Пробовал код, но не смог его выполнить. Пожалуйста помоги.
Необходимый:
Для круга высота и ширина должны быть одинаковыми.
.точка {
высота: 200 пикселей;
ширина: 200 пикселей;
цвет фона: #bbb;
радиус границы: 50%;
// Код ниже предназначен для размещения контента в центре круга
дисплей: гибкий;
flex-направление: столбец;
выравнивание содержимого: по центру;
выровнять элементы: по центру;
}
<дел>
<дел>
Также для внутреннего содержимого используйте display : flex и используйте столбец для их вертикального отображения.
Высота и ширина должны быть равны, чтобы сформировать круг и радиус границы 50%
CSS Half Circle | UnusedCSS
CSS предоставляет очень полезное свойство для границ — Радиус границы. При заданном радиусе границы округляются, и степень округления зависит от значения радиуса. И так же, как стиль и ширина границы, радиусы всех четырех вершин не зависят друг от друга.
Ниже показано, как выглядел бы блок с небольшим радиусом границы .
Что произойдет, если радиус границ будет равен или больше половины ширины блока? Вы, вероятно, правильно угадали. Получаем круг.
.circle {
//... остальные стили из прошлого примера
радиус границы: 5rem;
}
Теперь, если мы хотим нарисовать полукруг, как нам этого добиться? Можно подумать, что уменьшение высоты до половины значения решит проблему. Давайте попробуем.
.круг {
// остальные стили из прошлого примера
высота: 5рем;
}
Что нам нужно сделать, наряду с уменьшением высоты наполовину, так это иметь радиус только для верхних углов.
полукруг {
ширина: 20рем;
высота: 10бэр;
цвет фона: #48abe0;
радиус границы: 10rem 10rem 0 0;
}
