Sådan opretter du en halvcirkel med CSS

” element inde i body-tagget i vores HTML-fil.

---

---

HTML

< div >< / div >

Indstil nu de passende dimensioner for div'en, som vi vil tildele ' bredde ' ejendomsværdi som ' 180 px ' og ' højde ' ejendom med værdi ' 90px '. I næste trin skal du indstille ' grænse-radius ' ejendomsværdi ' 12rem 12rem 0 0 '; hvor det første ciffer 12rem vil trimme den øverste venstre side af div'en, vil den anden 12rem trimme den øverste højre side, tredje og fjerde ciffer 0 vil skære den nederste del af div'en ud. Til sidst, for at give en farve til cirklen, skal du bruge ' baggrundsfarve ' ejendom med værdien ' lilla ”.

CSS

div {
bredde : 180 px ;
højde : 90px ;
grænse-radius : 12 rem 12 rem 0 0 ;
baggrundsfarve : lilla ;
}

Gem HTML-filen med den nævnte kode og åbn den i din browser:

Som du kan se, har vi med succes oprettet en halvcirkel med CSS border-radius-egenskab.

Eksempel 2: Opret en halvcirkel fra bunden med CSS

For dannelsen af ​​en halvcirkel fra bunden vil vi indstille grænse-radius egenskabsværdier som ' 0 0 12rem 12rem ”, hvor de to første værdier repræsenterer den øverste venstre og øverste højre kant-radius. Vi har sat dem til 0 for at få den øverste halvdel af div til at forsvinde helt. For bunden har vi kun trimmet lidt nederst til venstre og nederst til højre ved at sætte værdierne til 12rem.

CSS

div {
bredde : 180 px ;
højde : 90px ;
grænse-radius : 0 0 12 rem 12 rem ;
baggrundsfarve : lilla ;
}

Produktion

Eksempel 3: Opret en halvcirkel fra højre med CSS

For at lave en CSS-halvcirkel til højre skal du først justere højden og bredden af ​​beholderen, da det er nødvendigt for at få den rigtige form af cirklen. Indstil ' bredde ' som ' 90px ' og ' højde ' som ' 180 px ' denne gang. Igen skal du bruge egenskaben border-radius med værdien ' 0 12rem 12rem 0 ”, hvor den første værdi 0 er for den øverste venstre side, den sidste værdi 0 er for den nederste venstre side, og den anden og tredje værdi tilføjes for at trimme den øverste højre og nederste højre side. Anvendelse af disse værdier vil danne en halvcirkel fra højre.

CSS

div {
bredde : 90px ;
højde : 180 px ;
grænse-radius : 0 12 rem 12 rem 0 ;
baggrundsfarve : lilla ;
}

Produktion

Eksempel 4: Opret en halvcirkel fra venstre med CSS

Denne gang skal du angive grænse-radius egenskaben langs værdien ' 12rem 0 0 12rem '; den første og sidste værdi 12rem vil trimme den øverste venstre og nederste venstre side af div'en, hvis den anden og tredje værdi sættes til 0, vil den øverste højre og nederste højre side af cirklen fjernes. Til sidst vil vores venstre-sidede halvcirkel blive skabt.

CSS

div {
bredde : 90px ;
højde : 180 px ;
grænse-radius : 12 rem 0 0 12 rem ;
baggrundsfarve : lilla ;
}

Produktion

Vi har tilbudt forskellige metoder til at skabe en halvcirkel med CSS.

Konklusion

For at oprette en halvcirkel kan vi blot bruge CSS ' grænse-radius ” ejendom. Halvcirklen kan skabes fra side til side, såsom til venstre, højre, top og bund. I egenskaben border-radius er startværdien for øverst til venstre, den anden er for øverste højre, den tredje er for nederste højre, og den fjerde værdi er for nederste venstre side. Denne artikel har forklaret, hvordan man opretter en halvcirkel med CSS.