Jak vytvořit půlkruh pomocí CSS

” uvnitř značky body našeho souboru HTML.

---

---

HTML

< div < / div >

Nyní nastavte vhodné rozměry pro div, například přiřadíme „ šířka 'hodnota nemovitosti jako' 180 pixelů ' a ' výška 'nemovitost s hodnotou' 90 pixelů “. V dalším kroku nastavte „ hraniční poloměr ' hodnota majetku ' 12rem 12rem 0 0 “; kde první číslice 12rem ořízne levou horní stranu divu, druhá 12rem ořízne pravou horní stranu, třetí a čtvrtá číslice 0 ořízne celou spodní část div. A konečně, chcete-li dát kruhu barvu, použijte „ barva pozadí 'vlastnost s hodnotou' nachový “.

CSS

div {
šířka : 180 pixelů ;
výška : 90 pixelů ;
hraniční poloměr : 12rem 12rem 0 0 ;
barva pozadí : nachový ;
}

Uložte soubor HTML se zmíněným kódem a otevřete jej ve svém prohlížeči:

Jak můžete vidět, úspěšně jsme vytvořili půlkruh s vlastností border-radius CSS.

Příklad 2: Vytvořte půlkruh zdola pomocí CSS

Pro vytvoření půlkruhu zdola nastavíme hodnoty vlastnosti border-radius jako „ 0 0 12rem 12rem “, kde první dvě hodnoty představují poloměr okraje vlevo nahoře a vpravo nahoře. Nastavili jsme je na 0, aby horní polovina div úplně zmizela. U spodní části jsme pouze ořízli trochu levou spodní a pravou spodní stranu nastavením hodnot na 12rem.

CSS

div {
šířka : 180 pixelů ;
výška : 90 pixelů ;
hraniční poloměr : 0 0 12rem 12rem ;
barva pozadí : nachový ;
}

Výstup

Příklad 3: Vytvořte půlkruh zprava pomocí CSS

Chcete-li vytvořit půlkruh CSS vpravo, nejprve upravte výšku a šířku kontejneru, protože je nutné získat správný tvar kruhu. Nastav ' šířka ' tak jako ' 90 pixelů ' a ' výška ' tak jako ' 180 pixelů ' tentokrát. Opět použijte vlastnost border-radius s hodnotou „ 0 12rem 12rem 0 “, kde první hodnota 0 je pro levou horní stranu, poslední hodnota 0 je pro levou spodní stranu a druhá a třetí hodnota se přidávají pro oříznutí pravé horní a pravé spodní strany. Použitím těchto hodnot vytvoříte půlkruh zprava.

CSS

div {
šířka : 90 pixelů ;
výška : 180 pixelů ;
hraniční poloměr : 0 12rem 12rem 0 ;
barva pozadí : nachový ;
}

Výstup

Příklad 4: Vytvořte půlkruh zleva pomocí CSS

Tentokrát zadejte vlastnost border-radius podél hodnoty „ 12rem 0 0 12rem “; první a poslední hodnota 12rem ořízne levou horní a levou spodní stranu div, nastavení druhé a třetí hodnoty na 0 vyjasní pravou horní a pravou spodní stranu kruhu. Nakonec vznikne náš levostranný půlkruh.

CSS

div {
šířka : 90 pixelů ;
výška : 180 pixelů ;
hraniční poloměr : 12rem 0 0 12rem ;
barva pozadí : nachový ;
}

Výstup

Nabídli jsme různé metody pro vytvoření půlkruhu pomocí CSS.

Závěr

K vytvoření půlkruhu můžeme jednoduše použít CSS “ hraniční poloměr ' vlastnictví. Půlkruh lze vytvořit ze strany na stranu, např. vlevo, vpravo, nahoře a dole. Ve vlastnosti border-radius je počáteční hodnota pro levou horní stranu, druhá pro pravou horní stranu, třetí pro pravou dolní stranu a čtvrtá hodnota pro levou spodní stranu. Tento zápis vysvětluje, jak vytvořit půlkruh pomocí CSS.