Ako vytvoriť polkruh pomocou CSS

” vo vnútri značky body nášho súboru HTML.

---

---

HTML

< div < / div >

Teraz nastavte vhodné rozmery pre div, napríklad priradíme „ šírka “hodnota nehnuteľnosti ako “ 180 pixelov “ a „ výška 'vlastnosť s hodnotou' 90 pixelov “. V ďalšom kroku nastavte „ hraničný polomer 'hodnota nehnuteľnosti' 12rem 12rem 0 0 “; kde prvá číslica 12rem orezáva ľavú hornú stranu divu, druhá 12rem orezáva pravú hornú stranu, tretia a štvrtá číslica 0 vystrihne celú spodnú časť div. Nakoniec, ak chcete dať kruhu farbu, použite „ farba pozadia “vlastnosť s hodnotou” Fialová “.

CSS

div {
šírka : 180 pixelov ;
výška : 90 pixelov ;
hraničný polomer : 12rem 12rem 0 0 ;
farba pozadia : Fialová ;
}

Uložte súbor HTML s uvedeným kódom a otvorte ho vo svojom prehliadači:

Ako vidíte, úspešne sme vytvorili polkruh s vlastnosťou CSS border-radius.

Príklad 2: Vytvorte polkruh zdola pomocou CSS

Na vytvorenie polkruhu zdola nastavíme hodnoty vlastnosti border-radius ako „ 0 0 12rem 12rem “, kde prvé dve hodnoty predstavujú polomer okraja vľavo hore a vpravo hore. Nastavili sme ich na 0, aby horná polovica div úplne zmizla. Pre spodok sme len trochu orezali ľavú spodnú a pravú spodnú stranu nastavením hodnôt na 12rem.

CSS

div {
šírka : 180 pixelov ;
výška : 90 pixelov ;
hraničný polomer : 0 0 12rem 12rem ;
farba pozadia : Fialová ;
}

Výkon

Príklad 3: Vytvorte polkruh sprava pomocou CSS

Ak chcete vytvoriť polkruh CSS napravo, najskôr upravte výšku a šírku kontajnera, pretože je potrebné získať správny tvar kruhu. Nastaviť ' šírka “ ako “ 90 pixelov “ a „ výška “ ako “ 180 pixelov ' tentokrát. Opäť použite vlastnosť border-radius s hodnotou „ 0 12rem 12rem 0 “, kde prvá hodnota 0 je pre ľavú hornú stranu, posledná hodnota 0 je pre ľavú spodnú stranu a druhá a tretia hodnota sú pridané na orezanie pravej hornej a pravej strany. Použitím týchto hodnôt sa sprava vytvorí polkruh.

CSS

div {
šírka : 90 pixelov ;
výška : 180 pixelov ;
hraničný polomer : 0 12rem 12rem 0 ;
farba pozadia : Fialová ;
}

Výkon

Príklad 4: Vytvorte polkruh zľava pomocou CSS

Tentoraz zadajte vlastnosť border-radius pozdĺž hodnoty „ 12rem 0 0 12rem “; prvá a posledná hodnota 12rem odreže ľavú hornú a ľavú spodnú stranu div, nastavenie druhej a tretej hodnoty na 0 vymaže pravú hornú a pravú spodnú stranu kruhu. Nakoniec sa vytvorí náš ľavostranný polkruh.

CSS

div {
šírka : 90 pixelov ;
výška : 180 pixelov ;
hraničný polomer : 12rem 0 0 12rem ;
farba pozadia : Fialová ;
}

Výkon

Ponúkli sme rôzne metódy na vytvorenie polkruhu pomocou CSS.

Záver

Na vytvorenie polkruhu môžeme jednoducho použiť CSS “ hraničný polomer ' nehnuteľnosť. Polkruh môže byť vytvorený zo strany na stranu, napríklad vľavo, vpravo, hore a dole. Vo vlastnosti border-radius je počiatočná hodnota pre ľavú hornú časť, druhá pre pravú hornú časť, tretia pre pravú spodnú stranu a štvrtá hodnota pre ľavú spodnú stranu. Tento zápis vysvetľuje, ako vytvoriť polkruh pomocou CSS.