Как да създадете полукръг с CSS

” вътре в етикета body на нашия HTML файл.

---

---

HTML

< див >< / див >

Сега задайте подходящите размери за div, като например ще присвоим „ ширина „стойност на имота като“ 180 пиксела ' и ' височина „имот със стойност“ 90 пиксела ”. В следващата стъпка задайте „ граница-радиус 'стойност на имота' 12rem 12rem 0 0 ”; където първата цифра 12rem ще изреже горната лява страна на div, втората 12rem ще изреже горната дясна страна, третата и четвъртата цифра 0 ще изрежат цялата долна част на div. И накрая, за да дадете цвят на кръга, използвайте „ Цвят на фона ' свойство със стойност ' лилаво ”.

CSS

див {
ширина : 180 пиксела ;
височина : 90 пиксела ;
граница-радиус : 12rem 12rem 0 0 ;
Цвят на фона : лилаво ;
}

Запазете HTML файла със споменатия код и го отворете във вашия браузър:

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

Пример 2: Създаване на полукръг отдолу с CSS

За формирането на полукръг от дъното, ние ще зададем стойности на свойството радиус на границата като „ 0 0 12rem 12rem ”, където първите две стойности представляват горния ляв и горния десен радиус на границата. Задали сме ги на 0, за да изчезне напълно горната половина на div. За долната част сме изрязали само малко долната лява и долната дясна страна, като сме задали стойностите на 12 rem.

CSS

див {
ширина : 180 пиксела ;
височина : 90 пиксела ;
граница-радиус : 0 0 12rem 12rem ;
Цвят на фона : лилаво ;
}

Изход

Пример 3: Създаване на полукръг от дясно с CSS

За да направите CSS полукръг отдясно, първо регулирайте височината и ширината на контейнера, тъй като е необходимо да получите правилната форма на кръга. Нагласи ' ширина ' като ' 90 пиксела ' и ' височина ' като ' 180 пиксела ' този път. Отново използвайте свойството border-radius със стойността „ 0 12rem 12rem 0 “, където първата стойност 0 е за горната лява страна, последната стойност 0 е за долната лява страна, а втората и третата стойност се добавят, за да изрежат горната дясна и долната дясна страна. Прилагането на тези стойности ще образува полукръг отдясно.

CSS

див {
ширина : 90 пиксела ;
височина : 180 пиксела ;
граница-радиус : 0 12rem 12rem 0 ;
Цвят на фона : лилаво ;
}

Изход

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

Този път посочете свойството border-radius по стойност „ 12rem 0 0 12rem ”; първата и последната стойност 12rem ще отрежат горната лява и долната лява страна на div, задаване на втората и третата стойност на 0 ще изчисти горната дясна и долната дясна страна на кръга. В крайна сметка нашият ляв полукръг ще бъде създаден.

CSS

див {
ширина : 90 пиксела ;
височина : 180 пиксела ;
граница-радиус : 12rem 0 0 12rem ;
Цвят на фона : лилаво ;
}

Изход

Предлагаме различни методи за създаване на полукръг с CSS.

Заключение

За да създадем полукръг, можем просто да използваме CSS ' граница-радиус ' Имот. Полукръгът може да бъде създаден от една страна на друга, например отляво, отдясно, отгоре и отдолу. В свойството border-radius първоначалната стойност е за горния ляв ъгъл, втората е за горния десен ъгъл, третата е за долния десен ъгъл и четвъртата стойност е за долния ляв ъгъл. Тази статия обяснява как да създадете полукръг с CSS.