Hvordan lage en halvsirkel med CSS

”-element inne i body-taggen til HTML-filen vår.

---

---

HTML

< div >< / div >

Still inn passende dimensjoner for div, slik som vi vil tilordne ' bredde ' eiendomsverdi som ' 180 piksler ' og ' høyde ' eiendom med verdi ' 90 piksler '. I neste trinn, sett ' grense-radius ' Eiendomsverdi ' 12rem 12rem 0 0 '; hvor det første sifferet 12rem vil trimme den øvre venstre siden av div, den andre 12rem vil trimme øverste høyre side, tredje og fjerde siffer 0 vil kutte ut den nederste delen av div. Til slutt, for å gi en farge til sirkelen, bruk ' bakgrunnsfarge ' eiendom med verdien ' lilla '.

CSS

div {
bredde : 180 piksler ;
høyde : 90 piksler ;
grense-radius : 12 rem 12 rem 0 0 ;
bakgrunnsfarge : lilla ;
}

Lagre HTML-filen med nevnte kode og åpne den i nettleseren din:

Som du kan se, har vi opprettet en halvsirkel med CSS border-radius egenskap.

Eksempel 2: Lag en halvsirkel fra bunnen med CSS

For dannelse av en halvsirkel fra bunnen, vil vi sette grense-radius egenskapsverdier som ' 0 0 12rem 12rem ”, der de to første verdiene representerer øvre venstre og øvre høyre kantradius. Vi har satt dem til 0 for å få den øverste halvdelen av div til å forsvinne helt. For bunnen har vi kun trimmet litt nederst til venstre og nederst til høyre ved å sette verdiene til 12rem.

CSS

div {
bredde : 180 piksler ;
høyde : 90 piksler ;
grense-radius : 0 0 12 rem 12 rem ;
bakgrunnsfarge : lilla ;
}

Produksjon

Eksempel 3: Lag en halvsirkel fra høyre med CSS

For å lage en CSS-halvsirkel til høyre, må du først justere høyden og bredden på beholderen, da det er nødvendig for å få den riktige formen på sirkelen. Sett ' bredde ' som ' 90 piksler ' og ' høyde ' som ' 180 piksler ' denne gangen. Igjen, bruk border-radius-egenskapen med verdien ' 0 12rem 12rem 0 ”, der den første verdien 0 er for øvre venstre side, siste verdi 0 er for nedre venstre side, og den andre og tredje verdien legges til for å trimme øvre høyre og nedre høyre side. Bruk av disse verdiene vil danne en halvsirkel fra høyre.

CSS

div {
bredde : 90 piksler ;
høyde : 180 piksler ;
grense-radius : 0 12 rem 12 rem 0 ;
bakgrunnsfarge : lilla ;
}

Produksjon

Eksempel 4: Lag en halvsirkel fra venstre med CSS

Denne gangen, spesifiser grense-radius-egenskapen langs verdien ' 12rem 0 0 12rem '; den første og siste verdien 12rem vil trimme den øverste venstre og nederste venstre siden av div, og å sette den andre og tredje verdien til 0 vil gjøre den øverste høyre og nederste høyre siden av sirkelen klar. Etter hvert vil vår venstresidige halvsirkel bli opprettet.

CSS

div {
bredde : 90 piksler ;
høyde : 180 piksler ;
grense-radius : 12 rem 0 0 12 rem ;
bakgrunnsfarge : lilla ;
}

Produksjon

Vi har tilbudt ulike metoder for å lage en halvsirkel med CSS.

Konklusjon

For å lage en halvsirkel kan vi ganske enkelt bruke CSS ' grense-radius ' eiendom. Halvsirkelen kan lages fra side til side, for eksempel til venstre, høyre, topp og bunn. I border-radius-egenskapen er startverdien for øverst til venstre, den andre er for øvre høyre, den tredje er for nedre høyre, og den fjerde verdien er for nedre venstre side. Denne artikkelen har forklart hvordan du lager en halvsirkel med CSS.