При разработке веб-сайта добавление полукругов вместо кругов придает ему лучший вид. Более того, формировать полукруги легко и интересно.
В этой статье мы предоставим руководство о том, как создать полукруг с помощью 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.