Jak stworzyć półokrąg za pomocą CSS

” wewnątrz tagu body naszego pliku HTML.

---

---

HTML

< div >< / div >

Teraz ustaw odpowiednie wymiary div, takie jak przypiszemy „ szerokość ” wartość właściwości jako „ 180px ' oraz ' wzrost ” właściwość z wartością ” 90px ”. W następnym kroku ustaw „ promień-granicy ' wartość nieruchomości ' 12rem 12rem 0 0 ”; gdzie pierwsza cyfra 12rem przycina górną lewą stronę div, druga 12rem przycina górną prawą stronę, trzecia i czwarta cyfra 0 wycinają całą dolną część div. Na koniec, aby nadać okręgowi kolor, użyj „ kolor tła ” właściwość o wartości ” fioletowy ”.

CSS

div {
szerokość : 180px ;
wzrost : 90px ;
promień-granicy : 12 rem 12 rem 0 0 ;
kolor tła : fioletowy ;
}

Zapisz plik HTML ze wspomnianym kodem i otwórz go w swojej przeglądarce:

Jak widać, udało nam się stworzyć półokrąg z właściwością CSS border-radius.

Przykład 2: Utwórz półokrąg od dołu za pomocą CSS

Aby utworzyć półokrąg od dołu, ustawimy wartości właściwości border-radius jako „ 0 0 12rem 12rem ”, gdzie dwie pierwsze wartości reprezentują górny lewy i górny prawy promień obramowania. Ustawiliśmy je na 0, aby górna połowa div zniknęła całkowicie. Na dole przycięliśmy tylko trochę dolną lewą i dolną prawą stronę, ustawiając wartości na 12 rem.

CSS

div {
szerokość : 180px ;
wzrost : 90px ;
promień-granicy : 0 0 12 rem 12 rem ;
kolor tła : fioletowy ;
}

Wyjście

Przykład 3: Utwórz półokrąg od prawej za pomocą CSS

Aby utworzyć półokrąg CSS po prawej stronie, najpierw dostosuj wysokość i szerokość kontenera, ponieważ jest to konieczne, aby uzyskać odpowiedni kształt koła. Ustaw ' szerokość ' jak ' 90px ' oraz ' wzrost ' jak ' 180px ' tym razem. Ponownie użyj właściwości border-radius o wartości „ 0 12rem 12rem 0 ”, gdzie pierwsza wartość 0 oznacza lewą górną stronę, ostatnią wartość 0 oznacza lewą dolną stronę, a druga i trzecia wartość są dodawane w celu przycięcia prawego górnego i prawego dolnego rogu. Zastosowanie tych wartości utworzy półkole z prawej strony.

CSS

div {
szerokość : 90px ;
wzrost : 180px ;
promień-granicy : 0 12 rem 12 rem 0 ;
kolor tła : fioletowy ;
}

Wyjście

Przykład 4: Utwórz półokrąg od lewej za pomocą CSS

Tym razem określ właściwość border-radius wzdłuż wartości „ 12rem 0 0 12rem ”; pierwsza i ostatnia wartość 12rem przycina górną lewą i dolną lewą stronę div, ustawienie drugiej i trzeciej wartości na 0 spowoduje wyczyszczenie górnej prawej i dolnej prawej strony okręgu. W końcu powstanie nasz lewostronny półokrąg.

CSS

div {
szerokość : 90px ;
wzrost : 180px ;
promień-granicy : 12 rem 0 0 12 rem ;
kolor tła : fioletowy ;
}

Wyjście

Zaproponowaliśmy różne metody tworzenia półkola za pomocą CSS.

Wniosek

Aby stworzyć półokrąg, możemy po prostu wykorzystać CSS” promień-granicy ' własność. Półokrąg można tworzyć z boku na bok, na przykład z lewej, z prawej, z góry i z dołu. We właściwości border-radius wartość początkowa dotyczy lewego górnego rogu, druga prawego górnego, trzecia prawego dolnego, a czwarta lewa dolnego. W tym artykule wyjaśniono, jak stworzyć półokrąg za pomocą CSS.