Jak stworzyć półkoło z CSS

CSS pozwala tworzyć różne kształty, takie jak prostokąty, owale, koła, kwadraty i inne. Jednak kształt, który występuje głównie w aplikacjach internetowych, jest kształt koła; Ponieważ jest łatwy do zrobienia i szeroko stosowany do projektowania.

Projektując stronę internetową, dodanie półkola zamiast kółek nadaje lepsze spojrzenie. Ponadto tworzenie półkoczek jest łatwe, a także interesujące.

W tym artykule zapewniamy przewodnik, jak utworzyć półkola za pomocą CSS.

Jak stworzyć półkoło z CSS?

Aby zrobić półkole, użyjemy „Radiusz graniczny" nieruchomość. Ta właściwość pomoże nam w następujących sposobach wykonanie półkola:

• Pół koła z góry
• Pół koła od dołu
• Pół koła od lewej
• Pół koła z prawej strony

Rozwijajmy każdy!

Przykład 1: Utwórz pół koła z góry za pomocą CSS

Aby utworzyć półkole z góry, najpierw określamy „”Element wewnątrz znacznika ciała naszego pliku HTML.

Html

Teraz ustaw odpowiednie wymiary dla Div, takie jak przypisujemy „szerokość„Wartość nieruchomości jako„180px" I "wysokość„Własność o wartości”90px". W następnym kroku ustaw „Radiusz graniczny" wartość nieruchomości "12rem 12rem 0 0”; gdzie pierwsza cyfra 12rem przycina lewą górną stronę Div, druga 12rem przycina prawą górną stronę, trzecia i czwarta cyfra 0 wyciąłby część dna Div. Wreszcie, aby nadać kolorze okręgu, skorzystaj z „kolor tła„Własność o wartości”fioletowy".

CSS

div
szerokość: 180px;
Wysokość: 90px;
Radiusz graniczny: 12em 12rem 0 0;
kolor tła: fioletowy;

Zapisz plik HTML z wymienionym kodem i otwórz go w przeglądarce:

Jak widać, z powodzeniem stworzyliśmy półkola z właściwością CSS Border-Radius.

Przykład 2: Utwórz pół koła z dołu z CSS

Do utworzenia półkola od dołu ustawimy wartości właściwości promieniowania granicznego jako „0 0 12rem 12rem”, Gdzie pierwsze dwie wartości reprezentują górny lewy i górny prawy promieni. Ustawiliśmy je na 0, aby górna połowa div zniknęła całkowicie. W przypadku dna przycięliśmy tylko małą lewą dolną i dolną prawą stronę, ustawiając wartości na 12rem.

CSS

div
szerokość: 180px;
Wysokość: 90px;
RADIUS BERDER: 0 0 12 REM 12M;
kolor tła: fioletowy;

Wyjście

Przykład 3: Utwórz pół koła z prawej z CSS

Aby wykonać półkole CSS po prawej, najpierw dostosuj wysokość i szerokość pojemnika, ponieważ konieczne jest uzyskanie odpowiedniego kształtu koła. Ustaw "szerokość" Jak "90px" I "wysokość" Jak "180px" tym razem. Ponownie, użyj właściwości promieniowania granicznego o wartości „0 12rem 12rem 0”, Gdzie pierwsza wartość 0 jest po lewej stronie, ostatnia wartość 0 dotyczy lewego dolnego boku, a druga i trzecia wartości są dodawane do przycięcia prawej i prawej dolnej strony. Zastosowanie tych wartości utworzy półkole z prawej strony.

CSS

div
szerokość: 90px;
Wysokość: 180px;
RADIUS BERDER: 0 12 REM 12 REM 0;
kolor tła: fioletowy;

Wyjście

Przykład 4: Utwórz pół koła od lewej z CSS

Tym razem określ właściwość Radia granicznego wzdłuż wartości „12rem 0 0 12rem”; Pierwsza i ostatnia wartość 12rem przycina lewą górną i dolną lewą stronę Div, ustawienie drugiej i trzecie. Ostatecznie powstanie nasza lewy półkola.

CSS

div
szerokość: 90px;
Wysokość: 180px;
RADIUS Border: 12em 0 0 12rem;
kolor tła: fioletowy;

Wyjście

Zaproponowaliśmy różne metody tworzenia półkola z CSS.

Wniosek

Aby stworzyć półkole, możemy po prostu wykorzystać CSS ”Radiusz graniczny" nieruchomość. Półkola można tworzyć z boku na bok, na przykład na lewy, prawy, górny i dolny. W właściwości Radiusa granicznego wartość początkowa jest po lewej górnej części, druga jest dla prawej górnej, trzecia jest dla prawej dolnej, a czwarta wartość jest dla lewej dolnej strony. Ten zapis wyjaśnił, jak stworzyć półkole z CSS.