Как нарисовать полукруг в CSS? Точнее 200px ширины от его полных 500px. Какие свойства и как задать

Предыдущий
вопрос Следующий
вопрос

Для создания полукруга в CSS, можно использовать псевдоэлемент :after или :before, сочетая свойства border-radius и overflow.

Примерный код для создания полукруга шириной 200px от 500px:

.semi-circle {
width: 500px;
height: 200px;
background-color: #f00; /* Цвет фона может быть изменен */
border-radius: 0 0 250px 250px; /* Устанавливаем радиус для правого и левого нижних углов */
overflow: hidden; /* Скрываем все, что выходит за пределы радиуса */
}

HTML код:

<div class="semi-circle"></div>

Таким образом, задав ширину элемента 500px, а высоту 200px, и установив радиус скругления border-radius в 250px (половина ширины элемента), мы получим полукруг шириной 200px от 500px.