Как создать полукруг с помощью CSS

Kak Sozdat Polukrug S Pomos U Css



CSS позволяет создавать различные формы, такие как прямоугольники, овалы, круги, квадраты и многое другое. Однако форма, которая чаще всего встречается в веб-приложениях, — это форма круга; потому что это легко сделать и широко используется в целях проектирования.

При разработке веб-сайта добавление полукругов вместо кругов придает ему лучший вид. Более того, формировать полукруги легко и интересно.

В этой статье мы предоставим руководство о том, как создать полукруг с помощью CSS.







Как создать полукруг с помощью CSS?

Чтобы сделать полукруг, мы будем использовать « радиус границы ' имущество. Это свойство поможет нам сделать полукруг следующими способами:



  • Полукруг сверху
  • Полукруг снизу
  • Полукруг слева
  • Полукруг справа

Давайте подробнее о каждом!



Пример 1: Создайте полукруг сверху с помощью CSS

Чтобы создать полукруг сверху, сначала мы укажем « <дел> ” внутри тега body нашего HTML-файла.





HTML

< див >< / див >

Теперь установите подходящие размеры для div, например, мы назначим « ширина ” значение свойства как “ 180 пикселей ' а также ' высота 'свойство со значением' 90 пикселей ». На следующем шаге установите « радиус границы ' стоимость имущества ' 12рем 12рем 0 0 ”; где первая цифра 12rem обрезает верхнюю левую часть div, вторая 12rem обрезает верхнюю правую сторону, третья и четвертая цифры 0 обрезают всю нижнюю часть div. Наконец, чтобы придать цвет кругу, используйте « фоновый цвет ” свойство со значением “ пурпурный ».



CSS

див {
ширина : 180 пикселей ;
высота : 90 пикселей ;
радиус границы : 12рем 12рем 0 0 ;
фоновый цвет : пурпурный ;
}

Сохраните HTML-файл с указанным кодом и откройте его в браузере:

Как видите, мы успешно создали полукруг со свойством border-radius CSS.

Пример 2: создание полукруга снизу с помощью CSS

Для формирования полукруга снизу мы установим значения свойства border-radius как « 0 0 12 бэр 12 бэр ”, где первые два значения представляют верхний левый и верхний правый радиус границы. Мы установили их на 0, чтобы верхняя половина div полностью исчезла. Для нижней части мы только немного обрезали нижнюю левую и нижнюю правую стороны, установив значения 12rem.

CSS

див {
ширина : 180 пикселей ;
высота : 90 пикселей ;
радиус границы : 0 0 12рем 12рем ;
фоновый цвет : пурпурный ;
}

Выход

Пример 3: Создайте полукруг справа с помощью CSS

Чтобы сделать полукруг CSS справа, сначала отрегулируйте высоту и ширину контейнера, чтобы получить правильную форму круга. Установить ' ширина ' в качестве ' 90 пикселей ' а также ' высота ' в качестве ' 180 пикселей ' в это время. Снова используйте свойство border-radius со значением « 0 12бэр 12бэр 0 ”, где первое значение 0 соответствует верхнему левому краю, последнее значение 0 — нижнему левому краю, а второе и третье значения добавляются для обрезки верхнего правого и нижнего правого края. Применение этих значений сформирует полукруг справа.

CSS

див {
ширина : 90 пикселей ;
высота : 180 пикселей ;
радиус границы : 0 12рем 12рем 0 ;
фоновый цвет : пурпурный ;
}

Выход

Пример 4: Создайте полукруг слева с помощью CSS

На этот раз укажите свойство border-radius по значению « 12 бэр 0 0 12 бэр ”; первое и последнее значение 12rem обрежет верхнюю левую и нижнюю левую стороны div, установка второго и третьего значения на 0 очистит верхнюю правую и нижнюю правую стороны круга. В конце концов, наш левосторонний полукруг будет создан.

CSS

див {
ширина : 90 пикселей ;
высота : 180 пикселей ;
радиус границы : 12рем 0 0 12рем ;
фоновый цвет : пурпурный ;
}

Выход

Мы предложили разные способы создания полукруга с помощью CSS.

Вывод

Чтобы создать полукруг, мы можем просто использовать CSS « радиус границы ' имущество. Полукруг можно создать из стороны в сторону, например, слева, справа, сверху и снизу. В свойстве border-radius начальное значение соответствует верхнему левому краю, второе — верхнему правому, третье — нижнему правому и четвертое значение — нижнему левому краю. В этой статье объясняется, как создать полукруг с помощью CSS.