Hvordan lage en semi -sirkel med CSS

CSS tillater deg å lage forskjellige former som rektangler, ovaler, sirkler, firkanter og mer. Formen som for det meste finnes i webapplikasjoner er imidlertid sirkelformen; Fordi det er enkelt å lage og mye brukt til utforming av formål.

Mens du designer et nettsted, kan du legge til semi-sirkler i stedet for sirkler. Dessuten er dannelsen av semi-sirkler enkel så vel som interessant.

I denne artikkelen vil vi gi en guide til hvordan du lager en halvsirkel ved hjelp av CSS.

Hvordan lage en semi -sirkel med CSS?

For å lage en halvsirkel, vil vi bruke “Border-Radius”Eiendom. Denne egenskapen vil hjelpe oss med å gjøre en halvsirkel på følgende måter:

• Semi -sirkel fra toppen
• Semi -sirkel fra bunnen
• Semi -sirkel fra venstre
• Semi -sirkel fra høyre

La oss utdype hver enkelt etter en!

Eksempel 1: Lag en semi -sirkel fra toppen med CSS

For å lage en halvsirkel fra toppen, først vil vi spesifisere "”Element inne i kroppskoden til HTML -filen vår.

Html

Sett nå de passende dimensjonene for DIV, slik at vi vil tildele "bredde”Eiendomsverdi som“180px”Og“høyde”Eiendom med verdi”90px”. I neste trinn, sett "Border-Radius" Eiendomsverdi "12REM 12REM 0 0”; Der det første sifferet 12REM vil trimme øverste venstre side av Div, vil den andre 12REM trimme øverste høyre side, tredje og fjerde siffer 0 vil kutte ut all-bunndelen av diven. Til slutt, for å gi en farge til sirkelen, bruk "bakgrunnsfarge”Eiendom med verdien”lilla”.

CSS

div
Bredde: 180px;
Høyde: 90px;
Border-Radius: 12REM 12REM 0 0;
bakgrunnsfarge: lilla;

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

Som du kan se, har vi laget en halvsirkel med CSS Border-Radius-eiendom.

Eksempel 2: Lag en semi -sirkel fra bunnen med CSS

For dannelsen av en halvsirkel fra bunnen, vil vi sette grenser-radius eiendomsverdier som "0 0 12REM 12REM”, Der de to første verdiene representerer øverst til venstre og øverste høyre side-radius. Vi har satt dem til 0 for å få den øverste halvdelen av divene til å forsvinne helt. For bunnen har vi bare trimmet litt nederst til venstre og nederst til høyre ved å sette verdiene til 12REM.

CSS

div
Bredde: 180px;
Høyde: 90px;
Border-Radius: 0 0 12REM 12REM;
bakgrunnsfarge: lilla;

Produksjon

Eksempel 3: Lag en semi -sirkel fra høyre med CSS

For å lage en CSS halvsirkel til høyre, først, juster høyden og bredden på beholderen, da det er nødvendig å få riktig form på sirkelen. Sett "bredde" som "90px”Og“høyde" som "180px" denne gangen. Bruk igjen grensen-radius-eiendommen med verdien “0 12REM 12REM 0”, Der den første verdien 0 er for øverste venstre side, er den siste verdien 0 for nedre venstre side, og den andre og tredje verdien blir lagt til for å trimme øverst til høyre og nedre høyre side. Å bruke disse verdiene vil danne en halvsirkel fra høyre.

CSS

div
Bredde: 90px;
Høyde: 180px;
Border-Radius: 0 12REM 12REM 0;
bakgrunnsfarge: lilla;

Produksjon

Eksempel 4: Lag en semi -sirkel fra venstre med CSS

Denne gangen, spesifiser grensen-radius-egenskapen langs verdien “12REM 0 0 12REM”; Den første og siste verdien 12REM vil trimme øverst til venstre og nedre venstre side av diven, og sette den andre og tredje verdien til 0 vil tydeliggjøre toppen til høyre og nedre høyre side av sirkelen. Etter hvert vil vår venstresidige halvsirkel opprettes.

CSS

div
Bredde: 90px;
Høyde: 180px;
Border-Radius: 12REM 0 0 12REM;
bakgrunnsfarge: lilla;

Produksjon

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

Konklusjon

For å lage en halvsirkel, kan vi ganske enkelt bruke CSS “Border-Radius”Eiendom. Semi-sirkelen kan opprettes fra side til side, for eksempel til venstre, høyre, topp og bunn. I egenskapen Border-Radius er den opprinnelige verdien øverst til venstre, den andre er til øverste høyre, den tredje er til nedre høyre, og den fjerde verdien er for nederst venstre side. Denne oppskrivningen har forklart hvordan du lager en halvsirkel med CSS.