Kuinka luoda puoliympyrä CSS:n avulla

”-elementti HTML-tiedostomme body-tunnisteen sisällä.

---

---

HTML

< div >< / div >

Aseta nyt sopivat mitat diville, kuten määritämme ' leveys ' omaisuuden arvo ' 180 pikseliä ' ja ' korkeus 'arvollinen omaisuus' 90 pikseliä ”. Aseta seuraavassa vaiheessa ' raja-säde ' omaisuuden arvo ' 12rem 12rem 0 0 ”; jossa ensimmäinen numero 12rem leikkaa div:n vasemman yläosan, toinen 12rem leikkaa oikean yläosan, kolmas ja neljäs numero 0 leikkaa div:n kokonaan alaosan. Lopuksi anna ympyrälle väri käyttämällä ' taustaväri 'omaisuus arvolla' violetti ”.

CSS

div {
leveys : 180 pikseliä ;
korkeus : 90 pikseliä ;
raja-säde : 12 rem 12 rem 0 0 ;
taustaväri : violetti ;
}

Tallenna HTML-tiedosto mainitulla koodilla ja avaa se selaimessasi:

Kuten näet, olemme onnistuneesti luoneet puoliympyrän, jossa on CSS border-radius -ominaisuus.

Esimerkki 2: Luo puoliympyrä alhaalta CSS:llä

Puoliympyrän muodostamiseksi alhaalta asetamme raja-säteen ominaisuusarvoiksi ' 0 0 12rem 12rem ”, jossa kaksi ensimmäistä arvoa edustavat vasemman yläkulman ja oikean yläreunan reunasädettä. Olemme asettaneet ne arvoon 0, jotta div:n yläosa katoaa kokonaan. Pohjaa varten olemme leikanneet vain hieman vasenta ja oikeaa alaosaa asettamalla arvot 12remiin.

CSS

div {
leveys : 180 pikseliä ;
korkeus : 90 pikseliä ;
raja-säde : 0 0 12 rem 12 rem ;
taustaväri : violetti ;
}

Lähtö

Esimerkki 3: Luo puoliympyrä oikealta CSS:llä

Jos haluat tehdä CSS-puoliympyrän oikealle, säädä ensin säilön korkeutta ja leveyttä, jotta ympyrän muoto on oikea. Aseta ' leveys ' kuten ' 90 pikseliä ' ja ' korkeus ' kuten ' 180 pikseliä ' tällä kertaa. Käytä jälleen raja-säteen ominaisuutta arvolla ' 0 12rem 12rem 0 ”, jossa ensimmäinen arvo 0 on vasemmalle yläpuolelle, viimeinen arvo 0 vasemmalle alapuolelle, ja toinen ja kolmas arvo lisätään leikamaan oikeaa ylä- ja alaosaa. Kun näitä arvoja käytetään, muodostuu puoliympyrä oikealta.

CSS

div {
leveys : 90 pikseliä ;
korkeus : 180 pikseliä ;
raja-säde : 0 12 rem 12 rem 0 ;
taustaväri : violetti ;
}

Lähtö

Esimerkki 4: Luo puoliympyrä vasemmalta CSS:llä

Määritä tällä kertaa border-radius-ominaisuus arvon ' 12rem 0 0 12rem ”; ensimmäinen ja viimeinen arvo 12rem leikkaa div:n vasemman ylä- ja alareunan, ja toisen ja kolmannen arvon asettaminen arvoon 0 selkeyttää ympyrän oikeaa ylä- ja alaosaa. Lopulta luodaan vasemmanpuoleinen puoliympyrämme.

CSS

div {
leveys : 90 pikseliä ;
korkeus : 180 pikseliä ;
raja-säde : 12 rem 0 0 12 rem ;
taustaväri : violetti ;
}

Lähtö

Olemme tarjonneet erilaisia ​​menetelmiä puoliympyrän luomiseen CSS:n avulla.

Johtopäätös

Puoliympyrän luomiseksi voimme yksinkertaisesti käyttää CSS:ää ' raja-säde ” omaisuutta. Puoliympyrä voidaan luoda sivulta toiselle, kuten vasemmalle, oikealle, ylä- ja alapuolelle. Rajaussäde-ominaisuuden aloitusarvo on vasemmalle yläpuolelle, toinen oikealle yläpuolelle, kolmas oikealle alapuolelle ja neljäs arvo vasemmalle alapuolelle. Tässä kirjoituksessa on selitetty puoliympyrän luominen CSS:n avulla.