Для создания полукруга внутри круга с использованием CSS, можно использовать несколько подходов. Вот три из них:
1. Использование градиента:
Сначала нужно создать основной круг с помощью свойств border-radius и background-color, а затем добавить градиент с радиусом в половину ширины и высоты круга. В результате получится полукруг внутри круга.
Пример кода:
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #ccc;
background-image: radial-gradient(circle at center, transparent 50%, #ccc 0);
}
2. Использование псевдоэлемента ::after или ::before:
В этом подходе создается круг с помощью border-radius и background-color, а затем добавляется псевдоэлемент ::after или ::before, который имеет полукруглую форму и позиционируется внутри основного круга.
Пример кода:
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #ccc;
position: relative;
}
.circle::after {
content: '';
width: 100%;
height: 50%;
border-radius: 0 0 50% 50%;
background-color: #fff;
position: absolute;
bottom: 0;
left: 0;
}
3. Использование SVG:
В этом подходе создается SVG-элемент, в котором рисуется круг и полукруг с помощью дуги. SVG можно встроить в HTML с помощью тега <svg> или использовать в качестве фона с помощью CSS свойства background-image.
Пример кода:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="100" fill="#ccc" />
<path d="M0,100 A100,100 0 0,0 200,100 Z" fill="#fff" />
</svg>
Каждый из этих подходов имеет свои особенности и может быть выбран в зависимости от конкретных требований и ограничений проекта.