Hoe maak je een halve cirkel met CSS

”-element in de body-tag van ons HTML-bestand.

---

---

HTML

< div >< / div >

Stel nu de geschikte afmetingen voor de div in, zoals we de ' breedte ” eigendomswaarde als “ 180px ' en ' hoogte ” eigendom met waarde “ 90px ”. Stel in de volgende stap de ' grens-radius ' eigendoms-waarde ' 12rem 12rem 0 0 ”; waar het eerste cijfer 12rem de linkerbovenkant van de div zal trimmen, de tweede 12rem de rechterbovenkant zal trimmen, het derde en vierde cijfer 0 zal het volledig onderste deel van de div wegsnijden. Als laatste, om de cirkel een kleur te geven, gebruikt u de ' Achtergrond kleur ” eigenschap met de waarde “ Purper ”.

CSS

div {
breedte : 180px ;
hoogte : 90px ;
grens-radius : 12rem 12rem 0 0 ;
Achtergrond kleur : Purper ;
}

Sla het HTML-bestand op met de genoemde code en open het in uw browser:

Zoals je kunt zien, hebben we met succes een halve cirkel gemaakt met de eigenschap CSS border-radius.

Voorbeeld 2: Maak een halve cirkel vanaf de onderkant met CSS

Voor de vorming van een halve cirkel vanaf de onderkant, stellen we de eigenschapswaarden voor de grensradius in als ' 0 0 12rem 12rem ”, waarbij de eerste twee waarden de grensradius linksboven en rechtsboven vertegenwoordigen. We hebben ze op 0 gezet om de bovenste helft van de div volledig te laten verdwijnen. Voor de onderkant hebben we alleen linksonder en rechtsonder een beetje bijgesneden door de waarden in te stellen op 12rem.

CSS

div {
breedte : 180px ;
hoogte : 90px ;
grens-radius : 0 0 12rem 12rem ;
Achtergrond kleur : Purper ;
}

Uitgang:

Voorbeeld 3: Maak een halve cirkel van rechts met CSS

Om een ​​CSS-halve cirkel naar rechts te maken, moet u eerst de hoogte en breedte van de container aanpassen, aangezien dit nodig is om de juiste vorm van de cirkel te krijgen. Stel de ' breedte ' net zo ' 90px ' en ' hoogte ' net zo ' 180px ' deze keer. Gebruik opnieuw de eigenschap border-radius met de waarde ' 0 12rem 12rem 0 ”, waarbij de eerste waarde 0 voor de linkerbovenkant is, de laatste waarde 0 voor de linkerbenedenhoek en de tweede en derde waarde worden toegevoegd om de rechterboven- en rechteronderkant bij te snijden. Als u deze waarden toepast, wordt er vanaf de rechterkant een halve cirkel gevormd.

CSS

div {
breedte : 90px ;
hoogte : 180px ;
grens-radius : 0 12rem 12rem 0 ;
Achtergrond kleur : Purper ;
}

Uitgang:

Voorbeeld 4: Maak een halve cirkel van links met CSS

Geef deze keer de eigenschap border-radius langs de waarde ' 12rem 0 0 12rem ”; de eerste en laatste waarde 12rem trimt de linkerboven- en linkeronderkant van de div, door de tweede en derde waarde op 0 in te stellen, worden de rechterboven- en rechteronderkant van de cirkel duidelijk. Uiteindelijk zal onze linkszijdige halve cirkel worden gemaakt.

CSS

div {
breedte : 90px ;
hoogte : 180px ;
grens-radius : 12rem 0 0 12rem ;
Achtergrond kleur : Purper ;
}

Uitgang:

We hebben verschillende methoden aangeboden voor het maken van een halve cirkel met CSS.

Conclusie

Om een ​​halve cirkel te maken, kunnen we eenvoudig de CSS gebruiken ' grens-radius ' eigendom. De halve cirkel kan van links naar rechts worden gemaakt, zoals naar links, rechts, boven en onder. In de eigenschap border-radius is de beginwaarde voor linksboven, de tweede voor rechtsboven, de derde voor rechtsonder en de vierde waarde voor linksonder. Dit artikel heeft uitgelegd hoe je een halve cirkel kunt maken met CSS.